即使自动完成，Android 版 Chrome 也会显示自动填充:关闭 [英] Chrome for Android showing Auto-fill even if autocomplete: off
问题描述
我有一个包含 4 个字段的表单，用户应该在其中输入两个城市(从和到)和两个日期(出站和返回日期).
I have a form with 4 fields where the user is supposed to enter two cities (From and To) and two dates (outbound and return date).
我有 autocomplete:off，它在大多数浏览器中都能正常工作.然而，对于 Android 上的 Chrome，我得到了烦人的自动填充，它与我自己的建议下拉列表重叠.
I have autocomplete:off, which works fine among most of the browsers. However, for Chrome on Android I get the annoying Auto-fill that overlaps my own suggestion drop-down list.
I have tried every single one of the suggested solutions from here and here, including:
1) 在表单中我的字段之前放置一个隐藏字段.即使与第一个真实字段同名:
1) Putting a hidden field before my fields in the form. Even with the same name as the first real field:
<input type="text" style="display:none" name="same_name_as_1st_field"/>
2) 隐藏一个div，而不是直接隐藏输入标签:
2) Hidding a div, instead of the input tag directly:
<div style="display: none;">
<input type="text" name="same_name_as_1st_field" />
</div>
3) Changing from autocomplete="off" to autocomplete="false"
3) 从 autocomplete="off" 更改为 autocomplete="false"
4) 浏览器通过只读模式自动填充.
5) autocomplete="new-password"
6) <form autocomplete="off" role="presentation">5) autocomplete="new-password"
6)
7) 使用 JQuery:
8) JQuery:
$(window).ready(function () {
$('#my_id').val(' ').val('');
});
8) jQuery:
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 生成您必须添加的下拉列表在鼠标按下事件的选择器中.
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 清除该值...
10) Own idea: I realized that by giving the field a default value, the auto-fill does not show up. Then, I tried giving a default value and clearing that value on focus with javascript...
<script>
$('#id_From').focus(function() {
this.value = "";
});
</script>
而且没有任何效果.
知道如何解决这个问题吗?
Any idea of how to solve this?
推荐答案
更新 (21-12-2017)
旧的解决方案停止工作，所以这里是一个新的.
Update (21-12-2017)
The old solution stopped working, so here is a new one.
使用以下输入标签触发自动填充:
The auto-fill is triggered with the following input tag:
<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 无法识别的内容似乎可以解决问题(目前).
Key here are the fields name and id, which were the ones modified with the old solution.
Apparently, Chrome identifies it as a field for Auto-fill. Thus, changing the name and id to something Chrome cannot identify seems to do the trick (for the moment).
例如:
<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="">
<小时>
旧
最后一个有效的解决方案，来自这里:
它从元素中删除name"和id"属性并分配它们1ms 后返回.把这个放在文档里准备好.
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);
});
});
这篇关于即使自动完成，Android 版 Chrome 也会显示自动填充:关闭的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
