文档章节

iscroll(4)的解决方案

PorcoMar
 PorcoMar
发布于 2016/12/07 19:38
字数 335
阅读 8
收藏 0
点赞 0
评论 0

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

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

2

3

4

5

6

7

8

9

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);

以上代码原理是:页面加载完成后查找到所有的'input, select, button'元素并依次绑定'touchstart'或'mousedown'事件,在执行事件的时候停止事件的传播,这样行了。

使用了iscroll之后,你会发现点击输入框时不灵敏,经常无法聚焦;页面文字也无法选择和复制。这是由于iscroll要监听鼠标事件和触摸事件来进行滚动,所以禁止了浏览器的默认行为。

iscroll不分青红皂白,禁止了浏览器的一切默认行为,导致上述问题。所以我们需要稍作修改: 

问题原因是:iscroll需要一直监听用户的touch操作,以便灵敏的做出对应效果,所以它把其余的默认事件屏蔽了。

onBeforeScrollStart: function (e) { e.preventDefault(); }, 


改成


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/vali/p/5885382.html

共有 人打赏支持
PorcoMar
粉丝 0
博文 7
码字总数 934
作品 0
杭州
Vue.js 移动端 Web App 点击穿透问题解决方案

描述 在近期的一个移动端项目中,有一个页面需要有弹框提示,并且这个弹框通过关闭按钮关闭。页面当中使用了 iScroll 来实现页面局部滚动,在 iScroll 的配置当中把 和 事件都开启了。 代码如...

沉迷学习中 ⋅ 05/18 ⋅ 0

Vue + better-scroll 实现移动端字母索引导航

shortcutList 是通过计算属性得到的,取 title 的第一个字符即可。 使用 better-scroll 使用 better-scroll 实现滚动。对了,使用的时候别忘了用 import 引入。 使用 created 方法...

sinat_17775997 ⋅ 05/07 ⋅ 0

手机浏览器中使用IScroll使click及a跳转事件无效

最近在页面中用iscroll.js,但是但是有跳转,用a标签的href进行跳转发现没有用,之后转换成用点击事件,发现依然不起作用,经过查询发现是禁止了浏览器的默认事件。 有的方法说如果用button或...

voole ⋅ 05/16 ⋅ 0

web app开发利器 - iscroll4 解决方案

存在即是道理,iscroll会诞生,主要是因为无论是在iphone、ipod、android 或是更早前的移动webkit都没有提供一种原生的方式来支持在一个固定高度的容器内滚动内容, 这个不幸的规则导致所有web...

文艺小青年 ⋅ 2017/06/29 ⋅ 0

移动web页面支持弹性滚动的3个方案

position:fixed 和 overflow:auto 进行简单的布局实现我们需要的效果,而在手机端遇到的问题如下:

同一种调调 ⋅ 2014/07/17 ⋅ 0

-WEBKIT-USER-SELECT:NONE导致输入框无法输入

原文:http://hicc.me/post/webkit-user-select-none-disabling-text-field.html 最近在webview中写页面的时候发现个别Android机型(Google Nexus,Android 4.2.2)输入框无法输入(但是键盘...

我是李达康 ⋅ 2014/11/21 ⋅ 0

常见的移动端H5页面开发遇到的坑和解决办法

手机共通问题 问题一:用同等比例的图片在PC机上很清楚,但是手机上很模糊,原因是什么呢? 经研究发现是devicePixelRatio作怪,因为手机分辨率太小,如果按照分辨率来显示网页字会非常小,所以苹果...

webmirror ⋅ 05/02 ⋅ 0

iscroll使用遇到的两个问题

滑动区域点击按钮会触发两次点击事件 以下内容引用自CSDN论坛的foreveryang321用户(原文链接:http://bbs.csdn.net/topics/390571943): 我也遇到这样的问题,最后通过2次点击时间差来解决...

红有三Evan ⋅ 2014/09/10 ⋅ 1

iscroll链接,打开是弹窗,ipad无法打开

如题,使用iscroll后,内容的链接,是以弹窗的方式打开超链接,有什么解决方案吗?弹窗在ipad上无法打开

prince_happy ⋅ 2014/10/17 ⋅ 1

jqm转场后iscroll失效了怎么解决

@thREam 你好,想跟你请教个问题:请问jqm转场后iscroll失效了怎么解决了,我看你之前有一个回答"destroy原先的iScroll,并从新创建一个新的iScroll对象即可",这个具体怎么整啊,我在$(documen...

jamehery ⋅ 2014/03/30 ⋅ 2

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Spring Cloud构建微服务架构—创建“服务注册中心”

创建一个基础的Spring Boot工程,命名为eureka-server,并在pom.xml中引入需要的依赖内容: <parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-par......

itcloud ⋅ 19分钟前 ⋅ 0

拖动

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>event</title> <style> #box { width: 100px; height: 100px; background-color: aquamarine; position: absolute; } </style......

fyliujj ⋅ 21分钟前 ⋅ 0

es6 polyfill array

polyfill之javascript函数的兼容写法——Array篇 1. Array.isArray(obj) if (!Array.isArray) { Array.isArray = function(arg) { return Object.prototype.toString.call(arg) === '[objec......

球球 ⋅ 23分钟前 ⋅ 0

kibana启动异常

检查一下:kibana.yml 每一对key:value中,冒号之后应有空格。

增删改查1 ⋅ 25分钟前 ⋅ 0

js修改img的src属性刷新图片时的图片缓存问题

问题:上传一张图片,通过js更新src属性刷新图片使其即时显示时, 当img的src当前的url与上次地址无变化时(只更改图片,名称不变,不同图片名称相同)图片不变化(仍显示原来的图片) 但通过...

HaierBrother ⋅ 25分钟前 ⋅ 0

Mysql

1.Jdbc Url 设置allowMultiQueries为true和false mysql的批量更新是要我们主动去设置的, 就是在数据库的连接url上设置一下,加上* &allowMultiQueries=true *即可。 参数名称 参数说明 缺省...

瑟青豆 ⋅ 29分钟前 ⋅ 0

mysql导出导入表结构与数据

当我们需要进行数据迁移时,mysql自带的mysqldump会是最好的方式。 1.导出某张表的结构和数据 首先,我们应当使用服务器,打开终端,连接到所需要导出的表所在的服务器上。执行命令: mysqld...

hengbao5 ⋅ 29分钟前 ⋅ 0

世界杯也走向“比拼”大数据的时代

《日本经济新闻》6月19日报道称,俄罗斯足球世界杯已于6月14日揭开战幕。作为第21次举办的足球世界杯,如何活用大数据有可能成为决定各支球队胜负的重要因素。从对阵球队的分析到战术建议,还...

加米谷大数据 ⋅ 29分钟前 ⋅ 0

金额转为千分制,金额转中文大写

金额转关为大写 /** 数字金额大写转换(可以处理整数,小数,负数) */ function digitUppercase(n){ if(!n) reutrn "" let fraction = ['角', '分']; let digit = [...

YXMBetter ⋅ 32分钟前 ⋅ 0

开发利器JRebel部署SpringBoot项目

不要以为年纪轻轻就跌倒了人生谷底,未来还有更大的下降空间等着你。 idea下载和安装JRebel 激活JRebel 访问https://my.jrebel.com/ 使用facebook或twitter登录 勾选 Build project automati...

郑龙飞 ⋅ 38分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部