iScroll 4 无法与表单 一起使用element iPhone Safari 和 Android 浏览器

Question

我正在使用以下 HTML 代码：

<form action="#" method="post">
    <fieldset>
        <label class="desc" id="title10" for="Field10">
            How many children do you have?
        </label>        
        <select id="Field10" name="Field10" class="field select large" tabindex="5">
            <option value="0" selected="selected">0 </option>
            <option value="1">1 </option>
            <option value="2">2 </option>
            <option value="3">3 </option>
            <option value="4">4 </option>
            <option value="5">5 </option>
            <option value="6">6 </option>
            <option value="7">7 </option>
            <option value="8">8 </option>
            <option value="9">9 </option>
        </select>
        <input type="submit" value="Send message" />
    </fieldset>
</form>

在 iPhone 和 Android 上不起作用。当我点击选择框时，什么也没有发生。

我正在使用 iScroll 4，它造成了问题。

<script type="application/javascript" src="iscroll-lite.js"></script>
<script type="text/javascript">
    var myScroll;
    function loaded() {
        myScroll = new iScroll('wrapper');
    }
    document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
    document.addEventListener('DOMContentLoaded', loaded, false);
</script>

我认为这是一个解决方案，但我不知道如何实施。

Answer 1

问题是 iScroll 取消了 select 标记的默认行为（如果你问我的话，这不是一个很好的实现）。

这发生在第 195 行的 _start() 函数中：

e.preventDefault();

如果您将其注释掉，您会发现 select 标记再次起作用。

但将其注释掉意味着您已经破解了该库，这可能会破坏其他所需的 iScroll 功能。因此，这里有一个更好的解决方法：

var selectField = document.getElementById('Field10');
selectField.addEventListener('touchstart' /*'mousedown'*/, function(e) {
    e.stopPropagation();
}, false);

该代码将允许发生默认行为，而不会将事件传播到 iScroll，在那里它会搞砸一切。

由于您的 JS 不在任何类似 jQuery 的 onReady() 事件中，因此您必须确保将此代码放在您 select 的 HTML 之后 元素已定义。

请注意，对于移动设备，事件为 touchstart，但对于 PC 浏览器，事件为 mousedown

Answer 2

我在 android 上的 iScroll 4.1.9 上遇到了同样的问题，我只是替换了第 95 行（在我的版本上）：

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

by ：

onBeforeScrollStart: function (e) {var nodeType = e.explicitOriginalTarget ? e.explicitOriginalTarget.nodeName.toLowerCase():(e.target ? e.target.nodeName.toLowerCase():''); if(nodeType !='select' && nodeType !='option' && nodeType !='input' && nodeType!='textarea') e.preventDefault(); },           

启用对输入、选择和文本区域标签的关注

Answer 3

终于在 Android 上修复了这个问题。最终修改了 iscroll.js 中的几行

以下是我们初始化 iScroll 的方法。

// code from https://github.com/cubiq/iscroll/blob/master/examples/form-fields/index.html
// don't preventDefault for form controls
_menuScroll = new iScroll('menu_wrapper',{
    useTransform: false,
    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();
    }
});

onBeforeScrollStart 允许控件执行默认行为。 Android浏览器好像useTransform有问题，所以转为false。

最后，当 useTransform 为 false 时，需要排除一些额外的 iscroll 代码：

// iscroll.js v4.1.9
// line 216:
if (that.options.useTransform) bar.style.cssText += ';pointer-events:none;-' + vendor + '-transition-property:-' + vendor + '-transform;-' + vendor + '-transition-timing-function:cubic-bezier(0.33,0.66,0.66,1);-' + vendor + '-transition-duration:0;-' + vendor + '-transform:' + trnOpen + '0,0' + trnClose;

// line 295:
if (that.options.useTransform) that[dir + 'ScrollbarIndicator'].style[vendor + 'Transform'] = trnOpen + (dir == 'h' ? pos + 'px,0' : '0,' + pos + 'px') + trnClose;

尝试了其他几种方法，然后意识到它与 iscroll 添加的 css 有关。

Answer 4

我知道迟到了，但这可能对某些人有帮助，

在 pageshow 事件中编写以下代码，但请确保 div id 不相同。

这是因为，iscroller 阻止了元素的默认行为

 $('#yourpage').bind('pageshow',function (event, ui) {

       var myScroll;

         if (this.id in myScroll) {
         myScroll[this.id].refresh();

         }else{ 

          myScroll[this.id] = new iScroll('wrapper', { //wrapper is div id
                   checkDOMChanges: true,
                   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();  }
                                 }
                               });
                            }
     document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

     });

Answer 5

这是解决方案

/* on page add this after all scripts */
    <script type="text/javascript">
            var myScroll;
            function loaded() {
                myScroll = new iScroll('wrapper');
            }
            document.addEventListener('DOMContentLoaded', function(){ setTimeout(loaded,500);}, false);
    </script>

/* attach a script for fix */
        $(document).ready(function(){
            var my_select = document.getElementsByTagName('select');
            for (var i=0; i<my_select.length; i++) {
                my_select[i].addEventListener('touchstart' /*'mousedown'*/, function(e) {
                    myScroll.destroy();
                    setTimeout(function(){myScroll = new iScroll('wrapper');},500);
                }, false);
            }

    /*if you have input problems */

            var input = document.getElementById('input');

            if (input) {
                input.addEventListener('touchstart' /*'mousedown'*/, function(e) {
                    e.stopPropagation();
                }, false);
            }    
        });

Answer 6

解决方案的另一个代码示例。并感谢之前的评论！
使用 Jquery！

之后：

$(document).ready(function() {            
    document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

    document.addEventListener('DOMContentLoaded', setTimeout(function () { loaded(); }, 200), false);
});

在加载的函数中

function loaded() {
    var allSelects = $('select');
    allSelects.each(function(index, item) {
                        item.addEventListener('touchstart' /*'mousedown'*/, function(e) { e.stopPropagation(); }, false);
                    });
}

Answer 7

替换行，onBeforeScrollStart: function (e) { e.preventDefault(); },

通过

onBeforeScrollStart: function (e) {
    var nodeType = e.explicitOriginalTarget ? e.explicitOriginalTarget.nodeName.toLowerCase():(e.target ? e.target.nodeName.toLowerCase():'');

    if(nodeType !='select' && nodeType !='option' && nodeType !='input' && nodeType!='textarea') {
         e.preventDefault();
    }
},

在 iScroll.js 中工作

Answer 8

从这段代码开始。这个解决方案对我有用：

<script type="text/javascript">

var myScroll;
function iScrollLoad() {
    myScroll = new iScroll('wrapper');
    enableFormsInIscroll();
}

function enableFormsInIscroll(){
  [].slice.call(document.querySelectorAll('input, select, button, textarea')).forEach(function(el){
    el.addEventListener(('ontouchstart' in window)?'touchstart':'mousedown', function(e){
      e.stopPropagation();
    })
  })
}

document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', function () { setTimeout(iScrollLoad, 200); }, false);

</script>

Answer 9

我迟到了，但我给你留下了我的解决方案。

如果你正在使用 jQuery，你可以尝试一下。

$('input, textarea, button, a, select').off('touchstart mousedown').on('touchstart mousedown', function(e) {
    e.stopPropagation();
});

Answer 10

  // Setup myScroll
  myScroll = new IScroll('#wrapper', {
    scrollX: horizontalSwipe,
    scrollY: !horizontalSwipe,
    momentum: false,
    snap: document.querySelectorAll('#scroller .slide'),
    snapSpeed: 400,
    bounceEasing: 'back',
    keyBindings: true,
    click: true
  });

对我来说，我只需要在最后一行添加 click: true ......
花了一整天的时间调试并实施所有建议的解决方案，但无济于事......

Answer 11

他任何人。

我知道你所有的答案，但我有新的方法可以提供。没有java脚本或drop iscroll函数。

所有这些解决方案的大问题是，当您在输入元素上滚动时，页面上没有滚动。当您只进行一两个输入时并不重要，但是当页面是一种表单时，您在滚动页面时会遇到很大的问题。

我提供的解决方案是将输入包装在标签标签中，或者使用指向输入的指针来制作标签标签。然后使用绝对定位和 z 索引将标签置于输入上方。当您触摸标签时，您将集中输入。

示例请为

HTML

<fieldset>
<label>
    <input type="text" />
</label>
</fieldset>

CSS，

fieldset {position:relative;z-index:20;}
label {position:relative;z-index:initial;}
input {position:relative;z-index:-1;}

您也可以通过这种方式将标签侧放在输入中，并将输入的绝对位置放入标签区域中，

以 100% 工作，检查一下

Answer 12

当 -webkit-transform:translate3d 应用于具有选择框或密码框的容器时，Android 存在一个错误[1]。激活这些元素的方框区域会移动，并且不在您认为的位置。此外，密码框绘制在不同的位置，因此看起来您有两个输入元素，而不是一个。

我在 AppMobi 工作，我们开发了一个工具包库来修复这些问题。我们已经实现了自定义选择框小部件和密码输入字段的替代品。看看下面。

https://github.com/imaffett/AppMobi.toolkit

[1] 我认为作者评论正在谈论这个错误 https://bugs.webkit.org/show_bug.cgi?id=50552

Answer 13

我有点晚了，但如果有人仍然感兴趣，我采用了@bastien的方法并对其进行了调整让它在 Android 上运行。我在实施中使用 JQM。

基本上我所做的是：

function scrollMe(element) {

var contentID = $wrapper.get(0).id;
var scroller = elm.find('[data-iscroll="scroller"]').get(0);
if (scroller) {
    var iscroll = new iScroll(contentID, {
        hScroll        : false,
        vScroll        : true,
        hScrollbar     : false,
        vScrollbar     : true,
        fixedScrollbar : true,
        fadeScrollbar  : false,
        hideScrollbar  : false,
        bounce         : true,
        momentum       : true,
        lockDirection  : true,
        useTransition  : true, 
        //the preceding options and their values do not have any to do with the fix
        //THE FIX:
        onBeforeScrollStart: function(e) {
            var nodeType = e.explicitOriginalTarget ? e.explicitOriginalTarget.nodeName.toLowerCase() : (e.target ? e.target.nodeName.toLowerCase():''); //get element node type
            if(nodeType !='select' && nodeType !='option' && nodeType !='input' && nodeType!='textarea') e.preventDefault(); //be have normally if clicked element is not a select, option, input, or textarea.
            else if (iscroll != null) {   //makes sure there is an instance to destory
                     iscroll.destroy(); 
                     iscroll = null;
            //when the user clicks on a form element, my previously instanced iscroll element is destroyed
            }
        },
        onScrollStart: function(e) { 
            if (iscroll == null) {  //check to see if iscroll instance was previously destoryed 
                var elm = $.mobile.activePage; //gets current active page
                var scrollIt = setTimeout( function(){ scrollMe(elm) }, 0 ); 
            } //recursively call function that re-instances iscroll element, as long as the user doesn't click on a form element
        } 
    });
    elm.data("iscroll-plugin", iscroll);
}

}

基本上，您需要做的就是在用户选择表单元素时销毁 iScroll 实例，但在它们实际开始滚动（onBeforeScrollStart）之前，并且如果用户使用自定义单击元素内的其他任何内容属性 data-iscroll="scroller"，他们可以像往常一样使用 iScroll 滚动。

<div data-role="page" id="pageNameHere" data-iscroll="enable">

Answer 14

这是一个非常简单的修复方法，对我有用。我注意到在 Android 浏览器中，在初始页面加载时，我无法单击选择框，但可以单击用于搜索的文本输入字段。然后我注意到，在单击文本输入字段后，它会识别我单击选择框。所以我所做的就是将其添加到我用来加载搜索页面的 javascript 函数中...

$('#search').focus();

因此，当加载搜索页面时，它会自动聚焦于文本输入字段，但不会弹出键盘，这正是我想要。抱歉，我的示例无法公开访问，但希望这仍然可以对某人有所帮助。

Answer 15

尝试这个解决方案
if (e.target.nodeName.toLowerCase() == "选择" || e.target.tagName.toLowerCase() == '输入' || e.target.tagName.toLowerCase() == '文本区域')
{
返回;
}

Answer 16

怎么样，这对我有用！：

$('input, select').on('touchstart', function(e) {
    e.stopPropagation();
});

Answer 17

即使您在 onBeforeScrollStart() 中排除了表单元素，android 2.2/2.3 browser/webview 中还有另一个错误：

https://www.html5dev-software.intel.com/viewtopic.php?f=26&t=1278
https://github.com/01org/appframework/issues/104

你不能使用“-webkit-transform”css样式在div的输入元素中输入中文字符。 iscroll 4 对滚动条 div 应用了“-webkit-transform”。

解决方案是将表单字段保留在滚动条之外的绝对 div 中。

Answer 18

Android 浏览器错误是 Android 内部非常旧的 WebKit 版本（甚至 Android 4.3 内部）造成的。 bug的根本原因——iScroll发回浏览器的点击事件处理错误（去掉preventDefault只是停止发送这个点击事件）
Android Chrome浏览器没有这个bug，因为它内部升级了WebKit库。

等待 Google 的 Android WebKit 升级。

Answer 19

检查一下。这解决了我的问题

https://github.com/cubiq/iscroll/issues/576

在我选择的选项中

click:false, preventDefaultException:{tagName:/.*/}