ios上【点击select元素,输入框自动获得焦点的问题】
今天遇到了一个很奇怪的问题:在ios手机上,如果页面出现滚动条,点击select元素的时候,偶尔会出现 “ 页面上的某一个输入框自动获得焦点 “ 的问题。
这个问题困扰我好久,一直找不到答案,今天终于有点头绪。
- 问题重现的前提:
1:页面有selec标签
2:有input标签
3:y轴有滚动条
- 问题的原因是:
点击select,触发touchstart事件,页面的滚动条会往顶部滚,事件进行冒泡
滚动完成后,点击的位置就是输入框所在的位置,
之后,由于事件冒泡,触发父元素的click事件,
之后输入框获得焦点
- 解决方案:
给select元素绑定touchstart事件,在事件里面阻止事件冒泡
$(‘select’).on('touchstart',function(e){
e.stopPropagation();
});
ios上【点击select元素,输入框自动获得焦点的问题】的更多相关文章
- 关于ionic2在IOS上点击延迟的问题
正常的点击事件, 不知道 为什么 ,在IOS上明显会延迟几百毫秒.. 加上tappable属性就可以解决了 <div tappable (click)="doClick()" ...
- 记录下hbuilder vue项目打包APP 在IOS上点击延迟的问题
做的项目打包成APP在IOS 上有延迟问题,在安卓下却不会,联想到之前 用IONIC时打包的APP也是 在IOS下有300毫秒延迟问题.所以 只能 认吧. 安装fastclick 插件: npm in ...
- Vue在点击内部元素时(获得焦点),怎样让外部div元素样式变化?
问题: div内部有很多元素,div. p. span .input等,各元素有嵌套,现在点击某元素时需要最外面这个div边框高亮,例如,点击了input开始输入 假设html 结构如下 <d ...
- 内嵌iframe页面在IOS下会受内部元素影响自动撑开的问题
IOS下的webview页面,内嵌iframe元素,将其样式指定为宽高100%: .iframe { width: %; height: %; } 在安卓下运行均无问题,但是在IOS下会出现异常. 具 ...
- Jquery 在ios上事件委托失效
点击通过js遍历出来的列表,跳转页面.点击事件委托在document上, 像这样: $(document).on("click",".nav",function ...
- ios上有时候提交按钮点击两次才可以取消输入框软键盘
ios上有时候提交按钮点击两次才可以取消输入框软键盘,点击第一次软键盘消失,点击第二次输入框页面消失,这样用户体验不好.我的做法是用 touchstart 代替click来处理 反应快,但是有时候会出 ...
- 【转】iOS 上常用的两个功能:点击屏幕和return退出隐藏键盘和解决虚拟键盘挡住UITextField的方法
iOS上面对键盘的处理很不人性化,所以这些功能都需要自己来实现, 首先是点击return和屏幕隐藏键盘 这个首先引用双子座的博客 http://my.oschina.net/plumsoft/blog ...
- 仅Firefox中A元素包含Select时点击Select不能选择option
这是在使用京东的一个日期组件时碰到的bug,重现bug的代码精简如下 <!DOCTYPE HTML> <html> <head> <title> 仅Fi ...
- jQuery自动完成点击html元素
/************************************************************************** * jQuery自动完成点击html元素 * 声 ...
随机推荐
- P4014 分配问题
\(\color{#0066ff}{题目描述}\) 有 \(n\) 件工作要分配给 \(n\) 个人做.第 \(i\) 个人做第 \(j\) 件工作产生的效益为 \(c_{ij}\) .试设计一个将 ...
- luogu1447 [NOI2010]能量采集 莫比乌斯反演
link 冬令营考炸了,我这个菜鸡只好颓废数学题了 NOI2010能量采集 由题意可以写出式子: \(\sum_{i=1}^n\sum_{j=1}^m(2\gcd(i,j)-1)\) \(=2\sum ...
- 【NOIP 2011】Mayan游戏(搜索+模拟)
描述 Mayan puzzle是最近流行起来的一个游戏.游戏界面是一个7行5列的棋盘,上面堆放着一些方块,方块不能悬空堆放,即方块必须放在最下面一行,或者放在其他方块之上.**游戏通关是指在规定的步数 ...
- mongoDB3.4安装
添加官方yum源——mongodb3.4vim /etc/yum.repos.d/mongodb-org-3.4.repo [mongodb-org-3.4] name=MongoDB Reposit ...
- 树莓派使用 HLS 实现视频流直播
说明 这次介绍一下基于上一篇文章"树莓派编译安装 FFmpeg "的应用,即 HLS 视频流直播.原理是 FFmpeg 将 USB 摄像头的原始视频流压缩为 H.264 视频流,然 ...
- java背包的数组实现,链表实现
数组实现 package base.structure; import java.lang.reflect.Array; import java.util.Iterator; /** * @progr ...
- C#后端调用WebApi地址
using Newtonsoft.Json; using System; using System.Collections.Generic; using System.Linq; using Syst ...
- 1001 害死人不偿命的(3n+1)猜想 (15)(15 分)
卡拉兹(Callatz)猜想: 对任何一个自然数n,如果它是偶数,那么把它砍掉一半:如果它是奇数,那么把(3n+1)砍掉一半.这样一直反复砍下去,最后一定在某一步得到n=1.卡拉兹在1950年的世界数 ...
- day28 socketserver
1. socketserver 多线程用的 例 import socket import time client=socket.socket() client.connect(("1 ...
- mysql+gtid主从同步
安装mysql yum install mysql-community-client-5.7.17-1.el6.x86_64.rpm mysql-community-common-5.7.17-1. ...