使用iScroll时,input等不能输入内容的解决方法
做移动平台的应用,使用iscroll使屏幕上下滑动。发现当使用iscroll后,input等不能输入内容了。只要在iscroll.js文件中加入如下代码就ok了。
function allowFormsInIscroll(){
[].slice.call(document.querySelectorAll('input, select, button')).forEach(function(el){
el.addEventListener(('ontouchstart' in window)?'touchstart':'mousedown', function(e){
e.stopPropagation(); })
})
}
document.addEventListener('DOMContentLoaded', allowFormsInIscroll, false);
问题原因是:iscroll需要一直监听用户的touch操作,以便灵敏的做出对应效果,所以它把其余的默认事件屏蔽了。
以上代码原理是:页面加载完成后查找到所有的'input, select, button'元素并依次绑定'touchstart'或'mousedown'事件,在执行事件的时候停止事件的传播,这样行了。
使用了iscroll之后,你会发现点击输入框时不灵敏,经常无法聚焦;页面文字也无法选择和复制。这是由于iscroll要监听鼠标事件和触摸事件来进行滚动,所以禁止了浏览器的默认行为。
iscroll不分青红皂白,禁止了浏览器的一切默认行为,导致上述问题。所以我们需要稍作修改:
onBeforeScrollStart: function (e) {
var target = e.target;
while (target.nodeType != 1) target = target.parentNode;
if (target.tagName != ‘SELECT’ && target.tagName != ‘INPUT’ && target.tagName != ‘TEXTAREA’)
e.preventDefault();
},
使用iScroll时,input等不能输入内容的解决方法的更多相关文章
- 使用iScroll时,input等不能输入内容的解决方法(share)
最近做移动平台的应用,使用iscroll使屏幕上下滑动.发现当使用iscroll后,input等不能输入内容了.只要在iscroll.js文件中加入如下代码就ok了. function allowFo ...
- 使用iScroll时input复选框不能选中解决方法
http://blog.csdn.net/xw505501936/article/details/51886018
- sublime text3 输入中文的解决方法及注册
让它输入中文的原理就是给sublime text3给打上个补丁libsublime-imfix.so,这个补丁可以直接git回来,或者下载补丁的源码编译安装. Ubuntu可以直接按照下面的教程 su ...
- session_start()导致history.go(-1)返回时无法保存表单数据的解决方法
问题背景: 在填写完表单提交时,由于某个表单项可能填写的不合法,导致提交失败,返回表单页面.但返回后所有的表单都被清空了,重新填写比较麻烦,度娘解释说,是由于每个页面都调用了session_start ...
- Dedecms5.7搜索结果页空白无内容的解决方法
Dedecms5.7搜索结果页空白.没有内容的解决方法 许多网友在修改dedecms5.7版本的搜索功能时搜索空白的解决方法,正解如下: 系统设置—>其他选项—->是否启用文章全文检索功能 ...
- PhpStorm terminal无法输入命令的解决方法
下面小编就为大家带来一篇PhpStorm terminal无法输入命令的解决方法.小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧 在使用PhpStorm时,点击下面的 ...
- vue项目初始化时npm run dev报错webpack-dev-server解决方法
vue项目初始化时npm run dev报错webpack-dev-server解决方法 原因:这是新版webpack存在的BUG,卸载现有的新版本webpack,装老版本就好webpack-dev- ...
- XCode 添加自定义framework运行时出现dyld: Library not loaded的解决方法
XCode添加自定义framework运行时出现dyld: Library not loaded的解决方法 在使用自定义的framework运行时,会出现如下的错误: dyld: Library no ...
- ubuntu14.04 LTS 搜狗输入法安装和不能输入中文的解决方法
搜狗输入法安装 1.首先通过Ubuntu软件中心,需要安装:fcitx https://pinyin.sogou.com/linux/help.php 2.然后再安装搜狗输入法包 https://pi ...
随机推荐
- django学习<一>:安装
这两天打算摸索下和python相关的东西,然后正好小伙伴有个关于网站的任务,就怀着好奇的心态了解了下,然后就很自然地开始涉及django的问题. 首先就是django安装的问题,想不到第一步就出问题了 ...
- HTML的内联元素换行问题
一般a.span.label多个组合,需要换行时,使用以下CSS来处理: white-space: nowrap; display: inline-block;
- phpmyadmin中访问时出现2002 无法登录 MySQL 服务器
phpmyadmin中访问时出现2002 无法登录 MySQL 服务器! 解决方法如下: 修改phpmyadmin目录中libraries文件夹下的config.default.php文件 $cfg[ ...
- WCF服务显示的是服务器名称而不是IP地址...
打开http://xx.xx.xx.xx:端口号/Service1.svc页面显示的服务地址为: http://xx_yy_server:端口号/Service1.svc?wsdl 是显示的服务器的名 ...
- golang的json操作
package main import ( "encoding/json" "fmt" "os" ) type ConfigStruct s ...
- svn搬移到gitlab及使用
svn是一款非常简便,易用的源代码管理工具,用了这么多年,对它情有独钟.都说习惯最难改,那为何要搬移到gitlab上呢? 喜欢尝试新东西,前提还是git比较强大,svn有的它都有,svn没有的它也有. ...
- VC++6.0一些常见问题解决方法(打开多个窗口、行号、添加文件无响应、更改.exe图标及名称等等)
背景: 最近使用VC++6.0做一个界面,供测试CAN通信使用.由于客户希望我们提供简单方便的函数接口让其最快速使用CAN,DLL(动态链接库)是不二之选.做DLL需要两个VC窗口进行测试才方便.可是 ...
- QT点击"X"按钮,调用closeEvent()函数来实现调用特定事件(附:粗略介绍QT的信号与槽的使用方法)
背景: QT在用户关闭窗口(直接点击"X"键)时,程序一般都需要做一些善后的事情,就我现在的程序来说,既关闭USB.如何实现? 正文: 首先,在对应窗体的".h" ...
- thinkphp中的自动验证
array(验证字段,验证规则,错误提示,[验证条件,附加规则,验证时间]) 1.验证字段 需要验证的表单字段名称,这个字段不一定是数据库字段,也可以是表单的一些辅助字段,例如确认密码和验证码等等.有 ...
- JavaScript 与函数式编程
原文:https://bethallchurch.github.io/JavaScript-and-Functional-Programming/ 译文:http://www.zcfy.cc/arti ...