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

Question

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

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

试验

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

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) 来自here的更复杂的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>

没有一个有效。

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

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：

它从元素中删除“name”和“id”属性并分配它们 1ms 后返回。把这个放在文档中准备好。

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