文档章节

iscroll(4)的解决方案

PorcoMar
 PorcoMar
发布于 2016/12/07 19:38
字数 335
阅读 15
收藏 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
杭州
私信 提问
加载中

评论(0)

前端必备自定义滚动库——iScroll

作者真的很懒,这篇文章从想法开始到现在都几个月了。😊 iScroll是什么 很多场景,如果使用body的滚动会很不方便,这时候,就会使用某个元素的局部滚动,恶心的事情就会发生了。 pc端web,...

chavesgu
2019/05/21
0
0
iscroll.js的简单使用方法(总结)

iscroll.js的简单使用方法(总结) 一、总结 一句话总结:Scroll是一个类,每个需要使用滚动功能的区域均要进行初始化。 最佳的HTML结构如下: iScroll作用于滚动区域的外层。在上面的例子中...

osc_va9x13k2
2018/10/12
4
0
iScroll.js插件使用方法

iScroll.js 用法参考 (share) 分享是传播、学习知识最好的方法 以下这篇文章是iScroll.js官网的中文翻译,尽管自己英文不好,但觉得原作者们翻译的这个资料还是可以的,基本用法介绍清楚了...

osc_851bq07r
2019/03/20
1
0
记:使用IScroll.js 开发picker日历组件遇到的问题及经验总结

IScroll中文文档 第一个问题: 边界留白      就是这种,上边界(最小),下边界(最大)有两个列表的位置是不能选择的。解决的办法是:      在HTML中,添加空白节点就行了。 第二个...

osc_nnbkiac5
04/16
2
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
3.1K
0

没有更多内容

加载失败,请刷新页面

加载更多

URL 中文链接 编码错误 完美解决

直接上代码 str = "%25E4%25B8%25AD%25E6%2596%2587";console.log(str);str =decodeURIComponent(decodeURIComponent(str));console.log(str); 输出结果 %25E4%25B8%25AD%25E6%2596%25......

放只虎归个山
今天
17
0
.NET中小数,浮点数和双精度之间的区别? - Difference between decimal, float and double in .NET?

问题: What is the difference between decimal , float and double in .NET? .NET中的decimal , float和double float什么区别? When would someone use one of these? 有人什么时候会使用......

fyin1314
今天
22
0
如何找出Windows上正在侦听端口的进程? - How can you find out which process is listening on a port on Windows?

问题: 如何找出Windows上正在侦听端口的进程? 解决方案: 参考一: https://stackoom.com/question/CXO/如何找出Windows上正在侦听端口的进程 参考二: https://oldbug.net/q/CXO/How-can...

技术盛宴
今天
10
0
OSChina 周三乱弹 —— 一家动物都快饿成标本了~

@黑觉非常君 :前天晚上9点开始睡觉,睡到昨天上午8点起床,昨天下午2点又睡,睡到下午7点多,晚上10点又困了,又睡,睡到今天上午8点,中途没醒过,怎么这么能睡,是不是快挂了。 能睡不是好...

小小编辑
今天
24
0
神剧推荐全剧最污片段精剪

神剧推荐,全剧最污片段精剪 豆瓣评分最高,脑洞最大,脑回路最曲折,恶搞无数经典,没有一条差评的神剧 整个系列完整版 到这里观看

a57571735
今天
22
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部