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

时间:2022-06-14 12:40:37

   最近做移动平台的应用,使用iscroll使屏幕上下滑动。发现当使用iscroll后,input等不能输入内容了。只要在iscroll.js文件中加入如下代码就ok了。

使用iScroll时,input等不能输入内容的解决方法(share)
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时,input等不能输入内容的解决方法(share)

   问题原因是: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)的更多相关文章

  1. 使用iScroll时,input等不能输入内容的解决方法

    做移动平台的应用,使用iscroll使屏幕上下滑动.发现当使用iscroll后,input等不能输入内容了.只要在iscroll.js文件中加入如下代码就ok了. function allowForm ...

  2. 使用iScroll时input复选框不能选中解决方法

    http://blog.csdn.net/xw505501936/article/details/51886018

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

    让它输入中文的原理就是给sublime text3给打上个补丁libsublime-imfix.so,这个补丁可以直接git回来,或者下载补丁的源码编译安装. Ubuntu可以直接按照下面的教程 su ...

  4. session_start()导致history.go(-1)返回时无法保存表单数据的解决方法

    问题背景: 在填写完表单提交时,由于某个表单项可能填写的不合法,导致提交失败,返回表单页面.但返回后所有的表单都被清空了,重新填写比较麻烦,度娘解释说,是由于每个页面都调用了session_start ...

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

    Dedecms5.7搜索结果页空白.没有内容的解决方法 许多网友在修改dedecms5.7版本的搜索功能时搜索空白的解决方法,正解如下: 系统设置—>其他选项—->是否启用文章全文检索功能 ...

  6. PhpStorm terminal无法输入命令的解决方法

    下面小编就为大家带来一篇PhpStorm terminal无法输入命令的解决方法.小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧   在使用PhpStorm时,点击下面的 ...

  7. vue项目初始化时npm run dev报错webpack-dev-server解决方法

    vue项目初始化时npm run dev报错webpack-dev-server解决方法 原因:这是新版webpack存在的BUG,卸载现有的新版本webpack,装老版本就好webpack-dev- ...

  8. XCode 添加自定义framework运行时出现dyld: Library not loaded的解决方法

    XCode添加自定义framework运行时出现dyld: Library not loaded的解决方法 在使用自定义的framework运行时,会出现如下的错误: dyld: Library no ...

  9. ubuntu14.04 LTS 搜狗输入法安装和不能输入中文的解决方法

    搜狗输入法安装 1.首先通过Ubuntu软件中心,需要安装:fcitx https://pinyin.sogou.com/linux/help.php 2.然后再安装搜狗输入法包 https://pi ...

随机推荐

  1. input使用javascript限制输入带小数的数字

    如题,网上找了很多都不太好实现.我的实现需求如下: 1.如果输入数字不带小数点那么自动加入两位小数,如:输入5,替换为5.00 2.输入5.,替换为5.00 3.输入5.1,替换为5.10 4.输入非 ...

  2. 【阿里聚安全·安全周刊】双十一背后的“霸下-七层流量清洗”系统| 大疆 VS “白帽子”,到底谁威胁了谁?

    关键词:霸下-七层流量清洗系统丨大疆 VS "白帽子"丨抢购软件 "第一案"丨企业安全建设丨Aadhaar 数据泄漏丨朝鲜APT组织Lazarus丨31款违规A ...

  3. springcloud之hystrix熔断器-Finchley.SR2版

    本篇和大家分享的是springcloud-hystrix熔断器,其主要功能是对某模块调用失败做断路和降级,简单点就当某个模块程序出问题了并达到某阈值就限制后面请求,并降级的方式提供一个默认返回数据.最 ...

  4. .netcore2.0+pgsql 脚手架

    mystaging介绍 这是一个 .netcore+pgsql 的脚手架,可以一键生成实体对象和业务层接口,让开发人员无需关注底层变动,专注编写业务代码,它可以让你使用 .netcore2.0的新特性 ...

  5. vue单文件组件实例1:简单单文件组件

    ​ HelloWorld.vue: <template> <div class="hello"> <h1>{{msg}}</h1> ...

  6. POJ1094——拓扑排序和它的唯一性

    比较模板的topological-sort题,关键在于每个元素都严格存在唯一的大小关系,而一般的拓扑排序只给出一个可能解,这就需要每趟排序的过程中监视它是不是总坚持一条唯一的路径. 算法导论里面的拓扑 ...

  7. 20162314 Experiment 2 - Tree

    Experiment report of Besti course:<Program Design & Data Structures> Class: 1623 Student N ...

  8. Spring在xml配置里配置事务

    事先准备:配置数据源对象用<bean>实例化各个业务对象. 1.配置事务管理器. <bean id="transactionManager" class=&quo ...

  9. JavaBean与Map&lt&semi;String&comma;Object&gt&semi;相互转换

    一.为什么要实现javaBean与Map<String,Object>相互转换 Spring中的BaseCommandController对象可以将传递过来的参数封装到一个JavaBean ...

  10. Android解决软键盘弹出将布局顶到上面

    有时候我们在下面的布局是一个RadioGroup,然后当页面中的EditText获得焦点的时候,会将地步的RadioGroup顶起来,这时候我们只需要在AndroidMainfest中RadioGro ...