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）浏览器通过readonly-mode自动填充。

<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，我只是把案例放在哪里     输入名称是“name”和“email”。对于任何其他情况     属性使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="">

OLD

最后一个有效的解决方案来自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);
            });
});

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

试验

1 个答案:

更新（21-12-2017）

OLD