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

Я опоздал, но я оставляю вам свое решение.

Если вы используете jQuery, вы можете попробовать это.

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

Answer 2

В Android есть ошибка, когда -webkit-transform: translate3d применяется к контейнеру, в котором есть поле выбора или поле пароля [1]. Область в штучной упаковке, чтобы активировать эти элементы, перемещается, а не там, где вы думаете, что они будут. Кроме того, поля паролей рисуются в другом месте, поэтому у вас есть два элемента ввода вместо одного.

Я работаю в AppMobi, и мы разработали библиотеку инструментария, в которой есть исправления для них. Мы реализовали настраиваемые виджеты для поля выбора и замену поля ввода пароля. Проверьте это ниже.

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

[1] Я думаю, что автор комментария говорит об этой ошибке https://bugs.webkit.org/show_bug.cgi?id=50552

Answer 3

Ошибка браузера Android - результат очень старой версии WebKit внутри Android, даже внутри Android 4.3. Основная причина ошибки - неправильная обработка события click, которое iScroll отправляет обратно в браузер (удаление предотвращение дефолта просто прекращает отправку этого события click) Браузер Android Chrome свободен от этой ошибки, поскольку он обновил библиотеку WebKit внутри.

Ожидание обновления Android WebKit от Google.

Answer 4

Вот действительно простое исправление, которое сработало для меня. Я заметил в браузерах Android, что при начальной загрузке страницы я не мог нажать на поле выбора, но я смог щелкнуть поле ввода текста, которое я использовал для поиска. Затем я заметил, что после того, как я нажал на поле ввода текста, он узнает, что я щелкнул поле выбора. Поэтому все, что я сделал, это добавил это в функцию javascript, которую использовал для загрузки страницы поиска ...

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

Таким образом, когда страница поиска загружается, она автоматически фокусируется на поле ввода текста, но не выскакивает клавиатура, а это именно то, что я хотел. Извините, мой пример не является общедоступным, но, надеюсь, это может кому-то помочь.

Answer 5

Как насчет, это работает для меня!:

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

Answer 6

Даже если вы исключили элементы формы в onBeforeScrollStart (), есть еще одна ошибка в браузере / веб-просмотре Android 2.2 / 2.3:

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

Вы не можете вводить китайские символы в элементах ввода в div с помощью стиля "-webkit-transform" css.Iscroll 4 применил «-webkit-transform» с помощью элемента прокрутки.

Решение состоит в том, чтобы сохранить поля формы в абсолютном элементе div из скроллера.

Answer 7

Я немного опоздал с игрой, но если кому-то все еще интересно, я выбрал подход @ 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 8

Проверьте это.Это исправило мою проблему

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

В опции я выбрал

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

Answer 9

попробуйте это решение, если (e.target.nodeName.toLowerCase () == "выберите" || e.target.tagName.toLowerCase () == 'input' ||= 'textarea') {
return;}