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元素 * 声 ...
随机推荐
- 洛谷P2709 BZOJ 3781 小B的询问 (莫队)
题目描述 小B有一个序列,包含N个1~K之间的整数.他一共有M个询问,每个询问给定一个区间[L..R],求Sigma(c(i)^2)的值,其中i的值从1到K,其中c(i)表示数字i在[L..R]中的重 ...
- jmeter+Jenkins性能测试自动化搭建
一.安装java.ant.maven 1.官网下载tar.gz包 2.解压相应的tar包 3.配置/etc/profile路径 4.source /etc/profile 使配置生效. 二.安装Jen ...
- 10.17(山东多校联合模拟赛 day1)
山东多校联合模拟赛 day1 题不难 rect [问题描述] 给出圆周上的 N 个点, 请你计算出以这些点中的任意四个为四个角,能构成多少个矩形. 点的坐标是这样描述的, 给定一个数组 v[1..N] ...
- vue.js组件之j间的通讯二
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- EA888发动机系列
EA888发动机是一个发动机系列,有很多型号,比如从二代机开始,二代机叫做Evolution 2,简称EVO2,分别有CEA:1.8T 横置:CCU:1.8T 纵置:CGM:2.0T横置,CRH:2. ...
- 2015苏州大学ACM-ICPC集训队选拔赛(1) 1008
猪猪过河 Time Limit : 3000/1000ms (Java/Other) Memory Limit : 65535/32768K (Java/Other) Total Submissi ...
- 缓冲区 粘包 029 send 和sendall 的区别 find 和 findall 的区别
一.tcp : 属于长连接 与客户端连接了之后 其他客户端需要等待 要连接另外一个 必须优雅的断开前面这个客户的连接. 二.缓冲区 :为了避免网络传输信号不通畅而是程序一直停留在消息发送状态而不向下进 ...
- 在word2010中添加带滚动条的文本框
由于文件内容过长,为了加强文章的可读性,可以添加一个带滚动条的文本框,既能使文章看起来干净整洁,同时也极大的提高了文章的可读性. 我这里对在word2010中文本框带滚动条作个介绍: 1. 打开wor ...
- 解决ifconfig没有网卡问题
ifconfig -a root@kali:~# ifup eth0 ifup: unknown interface eth0 vim /etc/network/interfaces #自行添加网卡 ...
- Linux文件扩展名
在linux中,扩展名没什么实际意义.但是为了兼容winodows,同时便于我们大多数习惯了windows的用户区分文件的不同,所以我们还是习惯通过扩展名来表示不同的文件类型. ①系统文件 扩展名 说 ...