文档章节

iscroll(4)的解决方案

PorcoMar
 PorcoMar
发布于 2016/12/07 19:38
字数 335
阅读 13
收藏 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
博文 8
码字总数 934
作品 0
杭州
私信 提问
iScroll 5 beta 1 发布,跨浏览器的滚动插件

iScroll 5 beta 1 发布了,这是一个全新的版本,在 API 上并不兼容 v4 版本,但愿你的升级过程不会太痛苦。 官方发行说明:http://cubiq.org/iscroll-5-ready-for-beta-test iScroll 的诞生是...

oschina
2013/06/03
3.4K
5
iscroll4文本框输入后会列表内容溢出导致上下滑动出现偏离

在iscroll4的例子上添加了几个文本框 然后发现在点击文本框的时候如果文本框的位置在弹出键盘的上方则没有事,如果弹出的键盘正好覆盖文本框 这个时候如果在文本框内输入文字会把iscroll4滑动...

sky止殇
2013/08/08
1K
2
-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
0
使用iScroll时,input等不能输入内容的解决方法

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

林宝基
2013/09/04
0
0
webpack打包后iscroll报错

用new webpack.optimize.CommonsChunkPlugin打包iscroll后 运行报IScroll未定义, 没打包前正常运行

duoduodym
2017/06/10
222
1

没有更多内容

加载失败,请刷新页面

加载更多

java框架学习日志-7(静态代理和JDK代理)

静态代理 我们平时去餐厅吃饭,不是直接告诉厨师做什么菜的,而是先告诉服务员点什么菜,然后由服务员传到给厨师,相当于服务员是厨师的代理,我们通过代理让厨师炒菜,这就是代理模式。代理...

白话
今天
22
0
Flink Window

1.Flink窗口 Window Assigner分配器。 窗口可以是时间驱动的(Time Window,例如:每30秒钟),也可以是数据驱动的(Count Window,例如:每一百个元素)。 一种经典的窗口分类可以分成: 翻...

满小茂
今天
17
0
my.ini

1

architect刘源源
今天
15
0
docker dns

There is a opensource application that solves this issue, it's called DNS Proxy Server It's a DNS server that solves containers hostnames, if could not found a hostname that mat......

kut
今天
15
0
寻找数学的广度——《这才是数学》读书笔记2700字

寻找数学的广度——《这才是数学》读书笔记2700字: 文|程哲。数学学习方式之广:国内外数学教育方面的专家,进行了很多种不同的数学学习方式尝试,如数学绘本、数学游戏、数学实验、数学步道...

原创小博客
今天
27
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部