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

wawor4827 发布于2019-08-20 14:44 / 2046人阅读

摘要：发现当使用后，等不能输入内容了。这是由于要监听鼠标事件和触摸事件来进行滚动，所以禁止了浏览器的默认行为。不分青红皂白，禁止了浏览器的一切默认行为，导致上述问题。

做移动平台的应用，使用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();
},

服务器托管云服务器 gta5云服务器不能使用方法 input输入值的解决方法 js获取input输入数据

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81876.html

使用iscroll4可能会遇到的问题(转：记录)

摘要：只针对，因为的暂时还不支持，会自动选择不用。原因还是和问题一样的，因为屏蔽了默认事件。在技术上解决不了的问题，我认为还是多和产品和沟通比较好，共同协商一个良好的方案。 1.在iscroll4的滚动容器范围内，点击input框、select等表单元素时没有响应这个问题原因在于iscroll需要一直监听用户的touch操作，以便灵敏的做出对应效果，所以它把其余的默认事件屏蔽了，解决的方法是...

keelii 2019-08-20 17:06 评论0 收藏0
使用iscroll4可能会遇到的问题(转：记录)

摘要：只针对，因为的暂时还不支持，会自动选择不用。原因还是和问题一样的，因为屏蔽了默认事件。在技术上解决不了的问题，我认为还是多和产品和沟通比较好，共同协商一个良好的方案。 1.在iscroll4的滚动容器范围内，点击input框、select等表单元素时没有响应这个问题原因在于iscroll需要一直监听用户的touch操作，以便灵敏的做出对应效果，所以它把其余的默认事件屏蔽了，解决的方法是...

褰辩话 2019-08-29 12:43 评论0 收藏0
如何用 js 获取虚拟键盘高度？（适用所有平台）

摘要：前言这是一个存在很久的历史问题了，对于这样一个具有普遍性的问题浏览器偏偏没有给出解决方案，没有方案还聊个什么别急，别急，接下来我们一起来扒一扒关于软键盘高度和的问题我们先来看一个短片认识一下这个问题问题描述当操作者进行输入操作的时候，弹起的前言这是一个存在很久的历史问题了，对于这样一个具有普遍性的问题浏览器偏偏没有给出解决方案，what？没有方案还聊个什么？别急，别急，接下来我们...

terro 2019-08-22 10:54 评论0 收藏0
如何用 js 获取虚拟键盘高度？（适用所有平台）

摘要：前言这是一个存在很久的历史问题了，对于这样一个具有普遍性的问题浏览器偏偏没有给出解决方案，没有方案还聊个什么别急，别急，接下来我们一起来扒一扒关于软键盘高度和的问题我们先来看一个短片认识一下这个问题问题描述当操作者进行输入操作的时候，弹起的前言这是一个存在很久的历史问题了，对于这样一个具有普遍性的问题浏览器偏偏没有给出解决方案，what？没有方案还聊个什么？别急，别急，接下来我们...

Forest10 2019-08-01 17:26 评论0 收藏0