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

我有一个包含4个字段的表单,用户应该进入两个城市(From和To)和两个日期(出站和返回日期)。

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

显示自动填充的屏幕截图

试验

我从这里和这里尝试了所提出的每一个解决方案,包括:

1)在表单中的字段之前放置一个隐藏字段。 即使与第一个真实领域同名:

  

2)直接隐藏div而不是输入标记:

 

3)从autocomplete="off"更改为autocomplete="false"

4)浏览器通过只读模式自动填充。

  

5) autocomplete="new-password"

6)

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,我只是考虑了输入名称为“name”和“email”的情况。 对于此属性使Chrome生成下拉列表的任何其他情况,您必须将其添加到鼠标按下事件的选择器中。

10)自己的想法:我意识到通过给字段一个默认值,自动填充不会显示。 然后,我尝试给出一个默认值,并使用javascript清除焦点上的值…

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

没有人工作。

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

更新(21-12-2017)

旧解决方案停止工作,所以这是一个新的解决方案。

使用以下输入标记触发自动填充:

  

这里的关键是字段nameid ,它们是使用旧解决方案修改的字段。 显然,Chrome会将其标识为自动填充字段。 因此,将名称和ID更改为Chrome无法识别的内容似乎可以解决问题(暂时)。

例如:

  

最后一个有效的解决方案,从这里 :

它从元素中删除“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); }); });