使用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();
},
使用iScroll时,input等不能输入内容的解决方法(share)的更多相关文章
- 使用iScroll时,input等不能输入内容的解决方法
做移动平台的应用,使用iscroll使屏幕上下滑动.发现当使用iscroll后,input等不能输入内容了.只要在iscroll.js文件中加入如下代码就ok了. function allowForm ...
- 使用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 ...
随机推荐
- Ubuntu 16.10 虚拟机安装记录
一定要选自定义. 这里一定要选 稍后安装操作系统 都是坑! 启动时出现'SMBus Host Controller not enabled'错误提示,进不到图形界面. 解决办法:1.在启动Ubunt ...
- edwin报警和监控平台近期的更新(python源码)
edwin从发布以来, 得到了不少关注, 获得了不少star. 最近又做了一些很有意义的改进, 同时完善了部分文档. 项目地址: https://github.com/harryliu/edwin , ...
- edwin报警和监控平台开源了(python源码)
简单介绍一下edwin edwin是一个报警和监控平台, 可以使用它监控任意东西, 如有异常(分为警告级和严重级), 可以发出报警. 可以自定义报警的通知方式, 比如邮件/短信/电话. 另外, 它提供 ...
- VTK初学一,b_PolyVertex多个图形点的绘制
#ifndef INITIAL_OPENGL #define INITIAL_OPENGL #include <vtkAutoInit.h> VTK_MODULE_INIT(vtkRend ...
- iOS 修改UIWebView的UserAgent
iOS和H5交互的时候,H5需要用userAgent带一些参数,需要我们修改默认的UserAgent为自定义的. 首先,给大家普及一下userAgent的历史,点击UserAgent查看. 1 在Ap ...
- Java Sax解析
一. Java Sax解析是按照xml文件的顺序一步一步的来解析,在解析xml文件之前,我们要先了解xml文件的节点的种类,一种是ElementNode,一种是TextNode.如下面的这段boo ...
- RelativeLayout布局
RelativeLayout用到的一些重要的属性: 第一类:属性值为true或falseandroid:layout_centerHrizontal 水平居中android:layout_center ...
- 大数据之sqoopCDH 备份
Sqoop课程笔记 一.概述 1.什么是sqoop? Hadoop的优势在于对数据的存储和处理,相比以前传统的数据库,在处理较较多的数据时,传统数据行业通过提升单机性能以提高处理性能,而且性价比随着性 ...
- Android Studio模拟器的问题及解决办法
1.could not bind gl_array_buffer error=0x502 环境:Windows10 解决办法: 在AVD Manager中,将模拟器的RAM设置为1G.
- 格式化Double类型
//格式化Double类型 //F:默认是2位小数点 //F6:输出小数点后6位,不够的话用0补齐 //G:默认输出原先的,保留小数点后面的位数 LalTotal.Text = "合计:原始 ...