iScroll 4无法使用表单<select>元素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>

<select>不适用于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标签的默认行为(如果你问我,这不是一个很好的实现).

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

e.preventDefault();

如果你发表评论,你会发现select标签再次起作用.

但是评论它意味着你已经破解了可能破坏其他理想的iScroll功能的库.所以这是一个更好的解决方法:

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

该代码将允许发生默认行为,而不会将事件传播到iScroll,它会将所有内容都搞砸.

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

请注意,对于移动设备,事件是touchstart,但对于您的PC浏览器,它将是mousedown

Answer 2

我在Android上的iScroll 4.1.9上遇到了同样的问题,我刚刚更换了第95行(在我的版本上):

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(); },           

这使得能够专注于输入,选择和textarea标签

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有关之前,尝试了其他几种方法.