Chrome for Android 即使自动完成也显示自动填充：关闭

Question

我有一个包含 4 个字段的表单，用户应该在其中输入两个城市（从和到）和两个日期（出境和 return 日期）。

我有 autocomplete:off，它在大多数浏览器中工作正常。但是，对于 Android 上的 Chrome，我得到了与我自己的建议下拉列表重叠的烦人的自动填充。

试炼

我已经尝试了 here and 中建议的每一个解决方案，包括：

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) 浏览器以只读模式自动填充。

<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 来自 here:

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);
});
Please notice that for Solution 1 and 2, I just took the cases where the input name is "name" and "email". For any other case where this attribute makes Chrome generate the dropdown you will have to add it in the selector for the mouse down event.

10) 自己的想法：我意识到通过给字段一个默认值，自动填充不会出现。然后，我尝试给出默认值并使用 javascript...

清除焦点上的值

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

并且 none 有效。

知道如何解决这个问题吗？

Answer 1

更新 (21-12-2017)

旧的解决方案已经失效，所以这里有一个新的解决方案。

使用以下输入标签触发自动填充：

<input type="search" name="To"  id="id_To" placeholder="a" class="autocomplete-city form-inner-field-city ui-autocomplete-input" autocomplete="off" maxlength="50" required="">

这里的关键是 name 和 id 字段，它们是用旧解决方案修改的。显然，Chrome 将其标识为自动填充的字段。因此，将名称和 ID 更改为 Chrome 无法识别的东西似乎可以解决问题（目前）。

例如：

<input type="search" name="Dep"  id="id_Dep" placeholder="a" class="autocomplete-city form-inner-field-city ui-autocomplete-input" autocomplete="off" maxlength="50" required="">

旧

终于找到了一个有效的解决方案，来自 here:

It removes "name" and "id" attributes from elements and assigns them back after 1ms. Put this in document get ready.

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

Chrome for Android 即使自动完成也显示自动填充：关闭

Chrome for Android showing Auto-fill even if autocomplete: off

forms

jquery

autocomplete

autofill

试炼

更新 (21-12-2017)

旧