使用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要监听鼠标事件和触摸事件来进行滚动,所以禁止了浏览器的默认行为,详见源代码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(); 
}, 
复制代码

 本文转自挨踢前端博客园博客,原文链接http://www.cnblogs.com/duanhuajian/archive/2012/11/09/2763159.html如需转载请自行联系原作者


@挨踢前端

相关文章
|
前端开发 JavaScript
CSS实现禁用状态,样式设置以及不可点击事件的行为
CSS实现禁用状态,样式设置以及不可点击事件的行为
3704 0
|
10月前
|
存储 缓存 算法
HashMap深度解析:从原理到实战
HashMap,作为Java集合框架中的一个核心组件,以其高效的键值对存储和检索机制,在软件开发中扮演着举足轻重的角色。作为一名资深的AI工程师,深入理解HashMap的原理、历史、业务场景以及实战应用,对于提升数据处理和算法实现的效率至关重要。本文将通过手绘结构图、流程图,结合Java代码示例,全方位解析HashMap,帮助读者从理论到实践全面掌握这一关键技术。
297 14
|
移动开发 JavaScript 前端开发
使用css 与 js 两种方式实现导航栏吸顶效果
使用css 与 js 两种方式实现导航栏吸顶效果
|
11月前
|
人工智能 自然语言处理 测试技术
通义千问AI来提高研发效率
【10月更文挑战第21天】
|
12月前
|
机器学习/深度学习 人工智能 自然语言处理
人工智能技术在金融领域的应用有哪些?
【10月更文挑战第16天】人工智能技术在金融领域的应用有哪些?
3858 1
|
存储 JavaScript 前端开发
小白实战!用JS实现一个3D翻书效果,附上代码
小白实战!用JS实现一个3D翻书效果,附上代码
el-input实现后缀图标和clearable的兼容,调整el-input clearable与自定义图标展示位置问题
el-input实现后缀图标和clearable的兼容,调整el-input clearable与自定义图标展示位置问题
817 1
|
弹性计算 数据安全/隐私保护
阿里云服务器怎么连接?
阿里云服务器怎么连接? 对于不少站长来说,阿里云服务器是必不可少的一个必需品。但是对于不少新手来说,对于服务器却不是那么的了解。今天小编就来为大家介绍下连接阿里云服务器的两种方法。 电脑一台 服务器一台 方法一 首先第一点自然是登录云服务器管理平台,这个自行登录。
15001 1
|
资源调度 JavaScript
vue项目:集成富文本编辑器 - 百度ueditor(vue-ueditor-wrap)
vue项目:集成富文本编辑器 - 百度ueditor(vue-ueditor-wrap)
1375 0
|
前端开发
大屏自适应/适配方案【详解】(echarts自适配、rem、flexible.js、vscode中px2rem插件自动计算rem)
大屏自适应/适配方案【详解】(echarts自适配、rem、flexible.js、vscode中px2rem插件自动计算rem)
1383 0