我创建了一个使用标签框下拉的web应用程序。除了Chrome浏览器(Version 21.0.1180.89),这在所有浏览器中都很有效。
尽管输入字段和表单字段都有autocomplete="off"属性,Chrome坚持显示该字段以前条目的下拉历史,这是删除标签框列表。
我创建了一个使用标签框下拉的web应用程序。除了Chrome浏览器(Version 21.0.1180.89),这在所有浏览器中都很有效。
尽管输入字段和表单字段都有autocomplete="off"属性,Chrome坚持显示该字段以前条目的下拉历史,这是删除标签框列表。
当前回答
浏览器不关心自动完成=关闭自动,甚至填充凭据到错误的文本字段?
我通过将密码字段设置为只读并激活它来修复它,当用户单击进入它或使用tab键到该字段时。
修复浏览器自动填充:只读和设置可写的焦点(在鼠标点击和标签通过字段)
<input type="password" readonly
onfocus="$(this).removeAttr('readonly');"/>
更新: Mobile Safari在字段中设置光标,但不显示虚拟键盘。新的修复工作像以前一样,但处理虚拟键盘:
<input id="email" readonly type="email" onfocus="if (this.hasAttribute('readonly')) {
this.removeAttribute('readonly');
// fix for mobile safari to show virtual keyboard
this.blur(); this.focus(); }" />
现场演示https://jsfiddle.net/danielsuess/n0scguv6/
/ / UpdateEnd
顺便说一下,更多关于我观察到的信息:
Sometimes I notice this strange behavior on Chrome and Safari, when there are password fields in the same form. I guess, the browser looks for a password field to insert your saved credentials. Then it autofills username into the nearest textlike-input field , that appears prior the password field in DOM (just guessing due to observation). As the browser is the last instance and you can not control it, sometimes even autocomplete=off would not prevent to fill in credentials into wrong fields, but not user or nickname field.
其他回答
对我来说,在表单和输入中设置autocomplete=“off”是有效的。但可以是片状的。有时它会建议密码或一些保存的登录名+密码选项。但不要提前预约。
Chrome版本:81.0.4044.138
CodePen
<表单角色=“表单” 方法=“发布” 操作=“#” 自动完成=“关闭”> <标签=“登录”>登录</label><br/> <输入类型=“文本” 名称=“登录” id=“登录” 自动完成=“关闭” /> <br/><br/> <标签=“密码”>密码</label><br/> <输入类型=“密码” 名称=“密码” 自动完成=“关闭” /> <br/><br/> <输入类型=“提交” 名称=“提交” 值=“提交” /> </form>
其他选项:
删除'form'标签…或者在提交之前将其从'div'更改为'form'。 用javascript和一些contentteditable ="true"字段可以让你的方式…
通常每隔几个月我就得另找工作。
目前的解决方案是使用type="search"。谷歌不会对输入的搜索类型应用自动填充。
参见:https://twitter.com/Paul_Kinlan/status/596613148985171968
更新04/04/2016:看起来这是固定的!参见http://codereview.chromium.org/1473733008
我不得不在drupal页面上用一个巨大的webform来解决这个问题。因为我不能编辑每个输入的html代码,所以我想出了下面的通用jQuery解决方案。
<script>
// Form Autocomplete FIX
function is_mobile() {
if( screen.width < 500 || navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i) ) {
return true;
}
return false;
}
jQuery( 'input[autocomplete="off"]' ).each( function() {
if( is_mobile() ) {
return;
}
jQuery( this ).attr( 'readonly', true );
} );
jQuery( 'input[autocomplete="off"]' ).focus( function() {
if( is_mobile() ) {
return;
}
jQuery( this ).removeAttr( 'readonly' );
jQuery( this ).focus();
} );
jQuery( 'input[autocomplete="off"]' ).blur( function() {
if( is_mobile() ) {
return;
}
jQuery( this ).attr( 'readonly', true );
} );
</script>
浏览器检测从这里开始。
我想有可能优化这段代码(我很想获得一些建议),但您将从中获得想法。
对任何想要解决这个问题的人来说,我终于明白了。
Chrome只服从的自动完成="off"如果页面是HTML5页面(我使用XHTML)。
我把我的页面转换成HTML5,问题就消失了(捂脸)。
写一个2020年以上的答案,如果这对任何人都有帮助的话。我尝试了上面的许多组合,但在我的案例中,有一个关键的组合是缺失的。即使我一直保持autocomplete="nope"一个随机字符串,它并不为我工作,因为我有name属性缺失!
所以我保留了name='password' And autocomplete = "new-password"
对于用户名,我保留了name="usrid" //不要保留包含'用户'的字符串
and autocomplete = "new-password" //也一样,所以谷歌停止建议密码(管理密码下拉菜单)
这对我来说非常有效。 (我为Cordova/ionic使用的Android和iOS web视图做到了这一点)
<ion-input [type]="passwordType" name="password" class="input-form-placeholder" formControlName="model_password"
autocomplete="new-password" [clearInput]="showClearInputIconForPassword">
</ion-input>