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

news/2025/5/24 1:16:26

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

https://dhexx.cn/news/show-560204.html

相关文章

统一导航路由方案

统一导航路由方案 一、目前的做法 目前统一导航做法如下:APP通过顶级域名访问导航服务器,获取当前可用服务器列表。列表包含:协议、域名、端口、IP、有效期。 二、方案 2.1 统一回复 服务器端仅有一份配置文件,文件以字段区分不同…

jQuery toUpperCase / toLowerCase示例

JavaScript代码片段,用于将文本转换为UpperCase和LowerCase。 为您的娱乐活动提供的简单示例–显示表单值表单输入的大小写更改。 请参阅: jQuery titleCaps函数 jQuery(form).submit(function() {jQuery(input#value).val(function(i, val) {return val…

学生信息管理系统之C语言版

前言&#xff1a; 这是我在大一时候与室友写得学生信息管理系统&#xff0c;现在倒腾出来差不多都忘记了。发给大家瞧瞧。 #include <stdio.h> #include <stdlib.h> #include <string.h> #include <Windows.h> //控制台句柄 HANDLE hOut; /*获取光标坐…

ES6关于Unicode的相关扩展

JS中的字符串类型是由引号括起来的一组由16位Unicode字符组成的字符序列。在过去&#xff0c;16位足以包含任何字符&#xff0c;直到Unicode引入了扩展字符集&#xff0c;编码规则不得不进行变更。本文将详细介绍ES6关于Unicode的相关扩展 概述 Unicode的目标是为世界上每一个字…

Nginx/tengine里的那些timeout时间

老早用nginx时就零零散散的接触这些时间&#xff0c;一直没静下心系统的梳理一遍&#xff0c;其实理解了这些时间的作用和设置&#xff0c;对配置tengine&#xff08;nginx&#xff09;线上业务的优化有不可小觑的作用&#xff0c;对nginx的工作流程也会有更深的理解&#xff0…

实体类重名问题解决

一、问题背景 在进行微服务开发时&#xff0c;有很大几率遇到系统间的实体类相同的情况&#xff0c;启动时会报如下错。 Caused by: org.apache.ibatis.type.TypeException: The alias OrderApply is already mapped to the value org.springblade.transport.entity.OrderApp…

git add 不必要的文件 如何撤回

[root666 IT-DOC]# git status -s ?? a.txt [root666 IT-DOC]# git add a.txt [root666 IT-DOC]# git status -s A a.txt [root666 IT-DOC]# git reset HEAD a.txt [root666 IT-DOC]# git status -s ?? a.txt转载于:https://www.cnblogs.com/bass6/p/7286645.html

20个新鲜的jQuery插件2011

这里有一些新鲜的jQuery插件&#xff0c;可以让您从2011年开始愉快地进行网页设计&#xff01; 一些插件包括图像滑块和画廊&#xff0c;wordpress插件&#xff0c;google maps插件&#xff0c;动画&#xff0c;工具提示和新闻。 请享用&#xff01; 相关文章&#xff1a; 2011…

让你忍不住想要动手收藏的—计算机组成原理总结

这是我观看了b站up做的笔记 还会持续更新 转载说明&#xff1a;务必注明来源&#xff0c;附带本人CSDN博客连接。 关注公众号&#xff1a;神的孩子都在歌唱 回复&#xff1a;组成原理 获取pdf电子版 计算机组成原理笔记总结第1章&#xff1a;计算机的系统第3章&#xff1a;系统…

MySQL 5.6通过MMM实现读写分离的高可用架构

上一篇博文我们使用keepalived主从同步搭建了一个简单的MySQL高可用架构&#xff08;详见http://blog.51cto.com/jiangjianlong/1981994&#xff09;&#xff0c;今天再分享下通过MMM搭建的实现MySQL读写分离的高可用群集。MMM (Master-Master Replication Manager for MySQL)是…