Chrome для Android показывает автозаполнение, даже если автозаполнение: выключено

У меня есть форма с 4 полями, в которых пользователь должен ввести два города (From и To) и две даты (исходящая и дата возврата).

У меня есть autocomplete:off, который отлично подходит для большинства браузеров. Однако для Chrome на Android я получаю раздражающее автозаполнение, которое перекрывает список моих собственных предложений.

Снимок экрана с автозаполнением

Испытания

Я пробовал каждый из предлагаемых решений здесь и здесь, в том числе:

1) Поместите скрытое поле перед моими полями в форме. Даже с тем же именем, что и первое реальное поле:

<input type="text" style="display:none" name="same_name_as_1st_field"/>

2) Сжатие div вместо входного тега напрямую:

<div style="display: none;">
    <input type="text" name="same_name_as_1st_field" />
</div>

3) Изменение от autocomplete="off" до autocomplete="false"

4) Автозаполнение браузера в режиме readonly.

<input type="password" readonly onfocus="this.removeAttribute('readonly');"/>

5) autocomplete="new-password"

6) <form autocomplete="off" role="presentation">

7) С помощью JQuery:

if ($.browser.webkit) {
    $('input[name="my_field_name"]').attr('autocomplete', 'off');
}

8) JQuery:

$(window).ready(function () {
    $('#my_id').val(' ').val('');
});

9) Более сложный JQuery из здесь:

jQuery('body').on('mousedown keydown','[name="name"][autocomplete="off"],
[name="email"][autocomplete="off"]',function(e){
    e.stopImmediatePropagation();
    if(typeof this.currentName =="undefined")
        this.currentName=jQuery(this).attr('name');
    jQuery(this).attr('name','');
});
jQuery('body').on('blur keyup','[autocomplete="off"]',function(e){
    e.stopImmediatePropagation();
    if(typeof this.currentName !="undefined")
        jQuery(this).attr('name',this.currentName);
});

Обратите внимание, что для решений 1 и 2 я просто взял случаи, когда   имя входа - "имя" и "электронная почта". Для любого другого случая, когда это   атрибут заставляет Chrome генерировать раскрывающееся меню, вам придется добавить его   в селекторе для события мыши.

10) Собственная идея: я понял, что, указав поле по умолчанию, автозаполнение не появляется. Затем я попытался дать значение по умолчанию и очистить это значение в фокусе с помощью javascript...

<script>
    $('#id_From').focus(function() {
        this.value = "";
    });
</script>

И никто не работает.

Любая идея о том, как решить эту проблему?

Ответы

Ответ 1

Наконец, решение, которое работало от здесь:

Он удаляет атрибуты "имя" и "id" из элементов и назначает их назад после 1 мс. Поместите это в документ, чтобы подготовиться.

$(document).ready(function() {
    $('form[autocomplete="off"] input, input[autocomplete="off"]').each(function () {

                var input = this;
                var name = $(input).attr('name');
                var id = $(input).attr('id');

                $(input).removeAttr('name');
                $(input).removeAttr('id');

                setTimeout(function () {
                    $(input).attr('name', name);
                    $(input).attr('id', id);
                }, 1);
            });
});