iScroll滚动区域中select、input、textarea元素无法点击的Bug修复
最近在一个项目中使用了iScroll4模拟滚动效果,调试过程中发现一个表单页中的所有表单项都无法点击聚焦, 如<select>、<input>、<textarea>。这是因为iScroll要监听整个页面事件,为了达到 最优效果,它默认禁用了所有元素的默认事件(但也有例外,如<a>默认事件不受影响),所以才造成这些表单元素点击没有反应,无法正常聚焦。
我们打开 iscroll.js ,找到这一行:
onBeforeScrollStart : function(e){ e.preventDefault(); },
将其改为:
onBeforeScrollStart : function(e){var nodeType =
e.explicitOriginalTarget ?
e.explicitOriginalTarget.nodeName.toLowerCase() : (e.target ?
e.target.nodeName.toLowerCase() : ”);if(nodeType != ‘select’ &&
nodeType != ‘option’ && nodeType != ‘input’ && nodeType
!= ‘textarea’){e.preventDefault();}},
这样,input及textarea可以正常聚焦了,但是发现select点击还是没有弹出下拉列表框。
这是因为 iscroll
默认使用的是css的transform变形中的translate3d实现区域滚动,每次滚动实际是改变translate3d中的y轴值,实际的
dom位置并没有发生变化。translate3d会导致页面的焦点错误,系统级下拉菜单的显示则会导致其出现显示偏离。
控制滚动模式的代码默认是:useTransform:
true。好在iscroll提供了另一种滚动方式,基于绝对定位位置变化的滚动。修改为useTransform:
false之后,iscroll就会使用对定位位方式来实现滚动,该方式是我们在web开发中模拟动画的最常用方式,滚动之后dom的实际位置也同步发生
了变化,不会出现错位偏离现象。
以上修改后,所有的表单元素都能正常使用了,不过需要注意,使用对position决定定位后,滚动区的宽度默认会自适应内容宽度,而不是父元素的100%,所以最好将滚动区域宽度设为100%。
iScroll滚动区域中select、input、textarea元素无法点击的Bug修复的更多相关文章
- IE7局部滚动区域下绝对定位或相对定位元素不随滚动条滚动的bug
尽管在项目中测试人员已经慢慢淡化了IE6的测试,但是IE7依然还是要纳入测试范围. 最近碰到一个IE7的蛋疼bug,在页面上设置了一个局部的滚动区域,在拖动滚动条的时候,滚动区域内设置了相对定位或绝对 ...
- PyQt(Python+Qt)学习随笔:怎么在QScrollArea滚动区域中展示子部件的超长内容?
老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 滚动区域可以针对部署在其上的子部件在不可见时进行滚动展示,但这种滚动展示仅只能展示内容层可见范围的子 ...
- Js控制iphone端的input/textarea元素失去焦点时隐藏键盘
原文http://www.it165.net/pro/html/201404/12672.html function objBlur(obj, time){ if(typeof obj != 'str ...
- js控制ios端的input/textarea元素失去焦点时隐藏键盘
同事在测试产品时发现这样一个:“某些页面击完input框,在点空白处时,iOS设备的键盘不能隐藏并且焦点也不会失去” 带着这个问题我进行了测试,发现在安卓的设备上并没有这种问题出现. 于是写js进行测 ...
- js中怎么为同级元素添加点击事件
事件件是javascript脚本语言的重要组成部分,因为有事件才使用户页面的体验更加的美好.元素添加事件是js语言中最基础的.我们可以为元素本身添加事件,也可以通过事件绑定和事件监听为元素的父元素和子 ...
- Jquery中动态生成的元素没有点击事件或者只有一次点击事件
今天用jq做动态生成的元素的click事件时,click只执行了一次,当然有些朋友可能根本没执行, 执行了一次的原因是因为可能有函数加载了一遍,一次都没执行的可能是没绑定对象或者jq版本问题, 动态生 ...
- 如何disabled禁用所有表单input输入框元素
转载地址:https://www.zhangxinxu.com/wordpress/?p=8568 一.pointer-events:none和覆盖层方法的问题 经常会遇到需求,需要禁用div中或者f ...
- chrome 下 input[file] 元素cursor设置pointer不生效的解决
https://jingyan.baidu.com/article/48b558e32fabb67f38c09a81.html 环境是chrome浏览器,今天发现为html网页中的input [fil ...
- 第15.29节 PyQt(Python+Qt)入门学习:containers容器类部件QScrollArea滚动区域详解
老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 一.概述 Scroll Area提供了一个呈现在其他部件上的可滚动区域视图,滚动区域用于显示框架内的 ...
随机推荐
- 查找SAP标准程序用户出口及BADI的方法
查找SAP标准事务代码中使用的BADI: 在SE24中,查看类对象CL_EXITHANDLER,在其方法(Methods)GET_INSTANCE 的第14行打断点,之后运行事务代码: 当有BADI将 ...
- Mousejack Hacking : 如何利用MouseJack进行物理攻击
0×00 前言 近期安全公司Bastille Networks(巴士底狱)安全研究员发现大多数无线鼠标和接收器之间的通信信号是不加密的.黑客可对一百米范围内存在漏洞的蓝牙无线键鼠进行嗅探甚至劫持,从而 ...
- UE4 C++ 使用FTimeLine/FTime 实例 Actor moving faster than Timeline
https://answers.unrealengine.com/questions/313698/timeline-issues.html https://docs.unrealengine.c ...
- 嵌入式linux应用开发完全手册学习笔记一
2015.3.25星期三 晴 有两个星期没写学习日记了,找个时间把这段时间做的电子词典和ARM小项目总结一下. 下面的知识点总结,U-BOOT:参考PDF文档:嵌入式linux应用开发完全手册 当虚拟 ...
- MAC上python+Eclipse+pydev环境搭建
转自:http://www.cnblogs.com/Bonker/p/3584707.html 本文重点介绍使用Eclipse+pydev插件来写Python代码, 以及在Mac上配置Eclipse ...
- WindowsPhone开发—— 使用手绘图片做景区导览地图
前些日子在做景区App遇到需求,使用手绘图片做一个简易的地图,支持放大缩小平移以及显示景点Mark,安卓上可以使用一个叫做“mAppWidget”的开源库来完成,WP上有人建议用ArcGIS,但是考虑 ...
- 黑马程序员:Java编程_异常
=========== ASP.Net+Android+IOS开发..Net培训.期待与您交流!=========== 异常即对问题的描述,将问题进行对象的封装. 1. 异常体系:Throwable ...
- M2: XAML Controls(2)
在前小节中,我们在Card程序的主界面中加入了简单的XAML控件, 本小节将在其基础上进行优化,使界面看上去更加美观.本小节用到了Grid Control, Border Control,以及XAML ...
- 浅谈C#中的接口和抽象类
C#中接口为"其他方面互不相干"的类型提供公共的服务和特征:C#中class只支持但继承,使用接口却支持多继承,例如:C#中System.String是从System空间中的4个i ...
- js中有趣的闭包(closure)
一.变量的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域. 变量的作用域无非就是两种:全局变量和局部变量. Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量 ...