移动端使用isscroll.js input无法获取焦点(就是点了没反应啦!)

有幸网上找到了解决的办法

只要在代码里加入以下一段代码就可以了

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‘事件,在执行事件的时候停止事件的传播,这样行了。

原作者地址:http://www.cnblogs.com/duanhuajian/archive/2012/11/09/2763159.html

时间: 2025-01-07 02:08:41

移动端使用isscroll.js input无法获取焦点(就是点了没反应啦!)的相关文章

web移动端fixed布局和input等表单的爱恨情仇 - 终极BUG,完美解决

[问题]移动端开发,ios下当fixed属性和输入框input(这里不限于input,只要可以调用移动端输入法的都包括,如:textarea.HTML5中contenteditable等),同时存在的时候:两位大侠瞬间发生剧烈的化学反应,出现各种奇葩问题,见下图: [结论]输入框position属性值不是fixed,而变成了absolute [出现情况]当我们唤起键盘的时候,输入框位置不再页面最下面,或者说页面当时还可以继续往下滚动,再或者页面没有滚动到最下边,这个时候就会出现上面的问题 [学习

js input分页跳转

当页数比较多的时候我们需要加一个input框来跳转到某一分页中,比如这个框 id="tiaozhuan",接下来我们用JS实现跳转 //分页跳转 $("#tiaozhuan").bind("blur",function(){ var p = $(this).val(); var href = location.href; if(/p=\d+/.test(href)){ href = href.replace(/p=\d+/,"p=&qu

移动端input 无法获取焦点的问题

下午遇到一个问题,移动端的input都不能输入了,后来发现是 -webkit-user-select :none ; 在移动端开发中,我们有时有针对性的写一些特殊的重置,比如: * { -webkit - touch - callout: none; //-webkit-touch-callout:none; 阻止长按图片之后呼出菜单提示复制的行为 //禁用Webkit内核浏览器的文字大小调整功能. -webkit-text-size-adjust: none; //避免点击a标签或者注册了cl

服务端Json数据+js表单数据提交的 表单交互插件(base-form.js)

我们在做表单的查看.编辑里涉及两个点: 点1,提交Form表单到服务器,保存到数据库 点2,页面显示Form表单里的所有字段 如果表单的字段很多,这两个点会有两个问题: 1,提交Form时,如何少量代码.快速获取表单的所有数据? 2,页面显示Form表单时,如何自动给表单的所有字段自动赋值,而不要一个一个属性地写代码? 针对这两个问题,我有一个推荐的做法,下面以Demo举例: 1)index.html或index.jsp里写一个form表单,引入jquery.js: <srcript type=

轻量级移动端滑动xwipe.js

工作需要写一个移动端的滑动效果,参考了swipe,和iscroll之后自己写了一个xwipe.在写的过程中学习了很多,分享一下心得. 首先html和css部分和swipe一样. html部分 xwipe结构 <div id='xwipe' class='xwipe'> <div class='xwipe-wrap'> <div></div> <div></div> <div></div> <div>

移动端 mui框架中input输入框或任何输入框聚焦后页面自动上移

一.mui框架中点击input后,安卓手机弹出自带的输入键盘时,页面自动上移 实现方法: (1)只要把input标签放在mui-content这个类里面就可以了 <div class="mui-content"> <input .../> </div> 注意:在有些情况下不适用,当把input标签放入mui-scroll中就不行了,也就是说mui-content和mui-scroll同时存在时不适用 <div class="mui-c

input textarea 获取焦点挡住输入法 解决办法

// .container 设置了 overflow 属性, 导致 Android 手机下输入框获取焦点时, 输入法挡住输入框的 bug // 相关 issue: https://github.com/weui/weui/issues/15 // 解决方法: // 0. .container 去掉 overflow 属性, 但此 demo 下会引发别的问题 // 1. 参考 http://stackoverflow.com/questions/23757345/android-does-not-

angular js input校验只能输入数字和字母 directive写法一则

js代码:.directive('validateNumberLetter', function () { return { require: 'ngModel', link: function (scope, elm, attrs, ctrl) { scope.$watch(attrs.ngModel, function(n){ if(!n) return; var oldName = attrs.validateNumberLetter; if(oldName !== n){ var reg

js input 限制数类型

JS控制 input 输入字符限制 ENTER键可以让光标移到下一个输入框 <input onkeydown="if(event.keyCode==13)event.keyCode=9" > 只能是中文 <input onkeyup="value=value.replace(/[ -~]/g,'')" onkeydown="if(event.keyCode==13)event.keyCode=9"> 屏蔽输入法 <i