使用iScroll时,input等不能输入内容的解决方法(share)

   最近做移动平台的应用,使用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要监听鼠标事件和触摸事件来进行滚动,所以禁止了浏览器的默认行为,详见源代码92行: 
  

onBeforeScrollStart: function (e) { e.preventDefault(); }, 

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();
}, 
时间: 2024-10-14 02:34:51

使用iScroll时,input等不能输入内容的解决方法(share)的相关文章

回车提交表单input框的输入内容

代码如下: 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></ti

sublime text3 输入中文的解决方法及注册

让它输入中文的原理就是给sublime text3给打上个补丁libsublime-imfix.so,这个补丁可以直接git回来,或者下载补丁的源码编译安装. Ubuntu可以直接按照下面的教程 sublime text3 输入中文的解决方法 1. 下载我们需要的文件,打开终端 ,输入: git clone https://github.com/lyfeyaj/sublime-text-imfix.git 2. 将下载的文件解压之后,移到当前目录(-目录下边),然后执行下边命令: cd ~/su

关于Windows_8.1/Windows 7下普通用户运行软件提示需要输入管理员密码解决方法

关于Windows_8.1/Windows 7下普通用户运行软件提示需要输入管理员密码解决方法 1. 问题起因 最近遇到一个比较棘手问题,顺丰速运修改了快递单填写方式,必须要安装他们公司开发的一个软件(软件名叫"速打线下用户专用版"),这个软件非常奇葩,只要是普通用户运行该软件,就弹出"用户控制"的对话框要求输入管理员密码,要么就把用户账户加入管理员组才能正常运行,作为一家比较有规模的企业,怎么可能随便开放管理员权限啊!这样做将会有无尽麻烦(如果你是管理员,你懂的)

Dedecms5.7搜索结果页空白无内容的解决方法

Dedecms5.7搜索结果页空白.没有内容的解决方法 许多网友在修改dedecms5.7版本的搜索功能时搜索空白的解决方法,正解如下: 系统设置->其他选项-->是否启用文章全文检索功能(需配置sphinx服务器)–>否 选择 否 就行了! 来源:http://www.veryhuo.com/a/view/44010.html 原文地址:https://www.cnblogs.com/xiaomifeng/p/9296771.html

水晶报表 Crystal Report 调用存储过程时出错 找不到表 ,解决方法。

用 CrystalReportViewer1 控件在asp.net的网页上显示报表,如果做报表时调用数据表数据的方式调用是可以成功的,但报表是用存储过程获取数据方式会出现以下错误: 找不到表'RptOpenCheck;1' . 文件 G:\TEMP\FO-OpenCheck {6D191F06-DECF-4A25-88FC-8553E3D435AA}.rpt 内出错: 找不到表. Error: 未将对象引用设置到对象的实例. The table 'RptOpenCheck;1' could no

关于javac编译时出现“非法字符:\65279”的解决方法

一般用UE或记事本编辑过的UTF-8的文件头会加入BOM标识,该标识由3个char组成.在UTF-8的标准里该BOM标识是可有可无的,Sun 的javac 在编译带有BOM的UTF-8的格式的文件时会出现"非法字符:\65279"的错误,但是用Eclipse进行编译却没有问题,原因在于Eclipse使用的是自己的JDT,而非javac,关于JDT的描述可以到eclipse的官网上去查看. 出现这种情况时,有两种解决方法: a) 利用UE.Editplus等文本编辑器重新保存文件为不带B

【Mongodb教程 第一课补加课2 】MongoDB下,启动服务时,出现“服务没有响应控制功能”解决方法

如图,如果通过下列代码,添加服务后,使用net start命令出现这样的问题时,可以参考下我的解决方法. D:\MongoDB>mongod --dbpath D:\MongoDB\Data --logpath D:\MongoDB\Log\MongoDB.log --logappend --serviceName MongoDB --auth --install 解决方法: 出现这个问题一般是路径有问题. 1)请注意你所有的路径没有错,包括mongod所在路径,日志所在路径等: 2)不要加入多

yum安装软件包时出现Transaction Check Error:错误的解决方法

[[email protected] ~]# yum install ipa-server Transaction Check Error:  file /usr/share/man/man3/XML::SAX::Base.3pm.gz conflicts between attempted installs of perl-XML-SAX-0.96-7.el6.noarch and perl-XML-SAX-Base-1.04-1.el6.rf.noarch  file /usr/share/

VC项目中,构造 CString 时,提示 explicit constructors (C2440) 的解决方法

其实还是 ANSI 和 UNICODE 编码的问题. 可以使用宏 _T() 包裹字符串,使得 ANSI 和 UNICODE 兼容.如 CString strJustAnother (_T ("This is a TCHAR string a.k.a. LPCTSTR")); 或者,给那些不想改代码人的偷懒方法,屏蔽掉这个编译错误: 在 stdafx.h 文件中你一般会发现这个宏  _ATL_CSTRING_EXPLICIT_CONSTRUCTORS 的声明. #define _ATL_