ios上【点击select元素,输入框自动获得焦点的问题】
2017-03-28 15:32
357 查看
今天遇到了一个很奇怪的问题:在ios手机上,如果页面出现滚动条,点击select元素的时候,偶尔会出现 “ 页面上的某一个输入框自动获得焦点 “ 的问题。
这个问题困扰我好久,一直找不到答案,今天终于有点头绪。
问题重现的前提:
1:页面有selec标签
2:有input标签
3:y轴有滚动条
问题的原因是:
点击select,触发touchstart事件,页面的滚动条会往顶部滚,事件进行冒泡
滚动完成后,点击的位置就是输入框所在的位置,
之后,由于事件冒泡,触发父元素的click事件,
之后输入框获得焦点
解决方案:
给select元素绑定touchstart事件,在事件里面阻止事件冒泡
$(‘select’).on('touchstart',function(e){
e.stopPropagation();
});
这个问题困扰我好久,一直找不到答案,今天终于有点头绪。
问题重现的前提:
1:页面有selec标签
2:有input标签
3:y轴有滚动条
问题的原因是:
点击select,触发touchstart事件,页面的滚动条会往顶部滚,事件进行冒泡
滚动完成后,点击的位置就是输入框所在的位置,
之后,由于事件冒泡,触发父元素的click事件,
之后输入框获得焦点
解决方案:
给select元素绑定touchstart事件,在事件里面阻止事件冒泡
$(‘select’).on('touchstart',function(e){
e.stopPropagation();
});
相关文章推荐
- [Javascript]如何在HTML中实现点击input输入框(获得焦点)后默认提示消失的效果
- ios Simulator运行中 ,点击文本框不能自动弹出keyboards的问题
- 移动web在ios和android下点击元素出现阴影问题
- 【问题记录】解决,打开app时,EditView的自动获得焦点,并且软键盘弹出
- 解决React Native中ScrollView中控件获得焦点及点击空白处键盘消失的问题
- 当输入框获得焦点时,自动显示验证图片(jQuery)
- 点击按钮的时候,输入框不获得焦点
- ionic开发---ios上点击输入框,失去焦点的时候,页面白屏
- Angular解决输入框由禁用状态转可用状态自动获取焦点失效问题
- Android开发中EditText获得焦点弹出输入框改变屏幕布局的问题
- 如何解决IE8中select控件多选控件在焦点不在控件上时点击选项要点击两次才能选中的问题
- Android EditText 的<requestFocus />用于点击tab键或enter键焦点自动进入下一个输入框
- sencha touch中点击overlay,会触发底下的输入框获得焦点的处理办法
- 类似智能购票的demo--进入页面后默认焦点在第一个输入框,输入内容、回车、right时焦点自动跳到下一个,当跳到select时,下拉选项自动弹出,并且可以按上下键选择,选择完成后再跳到下一个。
- 元素获得焦点focus()的问题
- EditText初始不获得焦点及输入框被遮挡问题
- iOS自定义键盘和系统键盘切换且文本输入框一直获得焦点
- 关于editext 进入获得焦点,点击无法弹出输入法问题,要弹出却不弹出
- 苹果IOS微信浏览器下自动播放音频问题+jquery click点击闪屏的问题
- 移动web在ios和android下点击元素出现阴影问题