文档章节

iscroll(4)的解决方案

PorcoMar
 PorcoMar
发布于 2016/12/07 19:38
字数 335
阅读 10
收藏 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
杭州
-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
iscroll使用遇到的两个问题

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

红有三Evan
2014/09/10
0
1
从零开始学 Web 之 移动Web(五)touch事件的缺陷,移动端常用插件

大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:http://www.cnblogs.com/lvonve/ CSDN...

Daotin
08/12
0
0
Hybrid App性能优化之路

主要从两个方面讲一下首屏数据展示耗时优化和局部滚动长行列表优化 首屏数据展示耗时优化 1.首屏渲染的一般时序可以用如下的几个步骤: 首先点击打开页面,创建webview,进行页面的加载,页面...

Harry_1234
2017/11/06
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

InvalidKeyException: Illegal key size

Caused by: java.lang.RuntimeException: java.security.InvalidKeyException: Illegal key size 解决方案:去官方下载JCE无限制权限策略文件。 jdk 5: http://www.oracle.com/technetwork/j......

自由的开源
14分钟前
0
0
JAVA秒杀实现以及优化原理

秒杀与其他业务最大的区别在于:秒杀的瞬间, (1)系统的并发量会非常的大 (2)并发量大的同时,网络的流量也会瞬间变大。 关于(2),最常用的办法就是做页面静态化,也就是常说的前后端分...

小贱是个程序员
18分钟前
1
0
Spring Aop之Advisor解析

在上文Spring Aop之Target Source详解中,我们讲解了Spring是如何通过封装Target Source来达到对最终获取的目标bean进行封装的目的。其中我们讲解到,Spring Aop对目标bean进行代理是通过Ann...

爱宝贝丶
20分钟前
0
0
Java高级工程师面试阿里,阿里云,天猫,菜鸟,涉及到的知识点

前言: 分享 Java高级工程师面试阿里,阿里云,天猫,菜鸟,涉及到的知识点,文章有点长,但比较全面,阅读时间15分钟左右,干货满满。 一、HashMap的那些事 1.1、HashMap的实现原理 1.1.1、...

Java大蜗牛
45分钟前
2
0
nginx模块学习五 expires 浏览器缓存

缓存原理 语法 Syntax: expires [modified] time;expires epoch | max | off;Default: expires off;Context: http,server,location,if in location 例/etc/nginx/conf.d/default.con......

Romanceling
56分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部