如何在主要浏览器中禁用特定输入(或表单字段)的自动完成?
当前回答
我在一个表单上遇到了问题,其中包含用户名和电子邮件的输入字段,而电子邮件正好在用户名之后。Chrome会自动将我当前的网站用户名填入电子邮件字段,并将重点放在该字段上。这并不理想,因为它是一种向web应用程序添加新用户的表单。
看起来,如果您有两个输入,一个接一个,其中第一个输入的标签或ID中包含“用户名”或用户名,而下一个输入的商标或ID中则包含“电子邮件”一词,chrome将自动填充电子邮件字段。
对我来说,解决问题的是将输入的ID更改为不包含这些单词。我还必须设置标签的文本转换为空字符串,并使用javascript settimeout函数将标签更改回0.01秒后的状态。
setTimeout(function () { document.getElementById('id_of_email_input_label').innerHTML = 'Email:'; }, 10);
如果您遇到任何其他输入字段被错误自动填充的问题,我会尝试此方法。
其他回答
最简单的答案是
<input autocomplete=“on | off”>
但请记住浏览器支持。当前,支持自动完成属性
铬17.0及最新版本IE 5.0及最新版本Firefox 4.0及最新版本Safari 5.2及最新版本Opera 9.6及最新版本
很确定这是目前最通用的解决方案
这将停止自动完成和弹出的建议框。
简介
让我们面对现实,自动完成=关闭或新密码似乎不起作用。这是应该做的,但却没有,每周我们都会发现其他事情发生了变化,浏览器会用我们不想要的更多随机垃圾填写表单。我发现了一个非常简单的解决方案,它不需要在登录页面上自动完成。
如何实施
步骤1)。将相同的函数调用添加到用户名和密码字段的onmousedown和onkeyup属性,确保为它们提供一个id,并在函数调用结束时记录代码。md=mousedown和ku=keyup
对于用户名字段,仅添加值;因为这防止了表单在进入页面时自动填充。
例如:
<input type=“text”value=“ ;”id=“myusername”onmousedown=“protectMe(this,'md')”onkeyup=“protectMe(this,'ku')”/>
步骤2)。在页面上包含此功能
功能保护Me(el,action){//删除启动时注入的空白var v=el.value.trim();//如果我们正在键入内容,请忽略此重置过程//并且只在最后一次删除时确认按键//我们这样做会导致表单值为空如果(action=='ku'&&v!=''){return;}//修复了将outerHTML写回自身所导致的双引号问题(在表单输入中)v=v.replace(/“/g,'\\”');//通过重新编写表单,重置单击表单进入焦点时出现的弹出窗口el.outerHTML=el.outrHTML;//发出指令重新调整焦点,插入重置之前存在的值,然后选择内容。setTimeout(“var d=document.getElementById('“+el.id+”');d.value=\“”+v+“\”;d.focus();if(d.value.length>1){d.select();}”,100);}
它做什么?
首先,它添加了;字段的空格,以便浏览器尝试查找与此相关的详细信息,但未找到任何内容,因此自动完成固定其次,当您单击时,将再次创建HTML,取消弹出窗口,然后重新选择值。最后,当您使用delete按钮删除字符串时,弹出窗口通常会再次出现,但如果我们达到该点,则keyup检查会重复该过程。
问题是什么?
点击选择一个字符是一个问题,但对于登录页面,大多数人会原谅它选择了所有文本Javascript确实会删除任何空格的输入,但为了安全起见,您可能也希望在服务器端这样做
能更好吗?
可能是的。这只是我测试过的东西,它满足了我的基本需求,但可能还有更多的技巧需要添加,或者有更好的方法来应用所有这些。
已测试的浏览器
截至本发布日期,已在最新的Chrome、Firefox和Edge上测试和工作
我尝试了几乎所有的答案,但新版本的Chrome很聪明;如果你写
autocomplete="randomstring" or autocomplete="rutjfkde"
它会自动将其转换为
autocomplete="off"
当输入控件接收到焦点时。
所以,我使用jQuery完成了这项工作,我的解决方案如下。
$("input[type=text], input[type=number], input[type=email], input[type=password]").focus(function (e) {
$(this).attr("autocomplete", "new-password");
})
这是最简单的,对于表单上的任何数量的控件都可以做到。
自动填充功能在不选择字段的情况下更改值。我们可以在状态管理中使用它来忽略选择事件之前的状态更改。
React中的一个示例:
import React, {Component} from 'react';
class NoAutoFillInput extends Component{
constructor() {
super();
this.state = {
locked: true
}
}
onChange(event){
if (!this.state.locked){
this.props.onChange(event.target.value);
}
}
render() {
let props = {...this.props, ...{onChange: this.onChange.bind(this)}, ...{onSelect: () => this.setState({locked: false})}};
return <input {...props}/>;
}
}
export default NoAutoFillInput;
如果浏览器尝试填充字段,则元素仍被锁定,状态不受影响。现在,您可以用NoAutoFillInput组件替换输入字段,以防止自动填充:
<div className="form-group row">
<div className="col-sm-2">
<NoAutoFillInput type="text" name="myUserName" className="form-control" placeholder="Username" value={this.state.userName} onChange={value => this.setState({userName: value})}/>
</div>
<div className="col-sm-2">
<NoAutoFillInput type="password" name="myPassword" className="form-control" placeholder="Password" value={this.state.password} onChange={value => this.setState({password: value})}/>
</div>
</div>
当然,这个想法也可以用于其他JavaScript框架。
非常简单的解决方案只需更改标签名称和字段名称,而不是更通用的名称,例如:名称、联系人、电子邮件。使用“邮件收件人”而不是“电子邮件”。浏览器忽略这些字段的自动完成。
推荐文章
- 使伸缩项目正确浮动
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何触发自动填充在谷歌Chrome?
- 创建圈div比使用图像更容易的方法?
- 为什么Chrome浏览器不正确地确定页面是在不同的语言,并提供翻译?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度,而不是整个元素的宽度,使用CSS?
- 如何删除和清除所有的本地存储数据
- 强制打开“另存为…”弹出打开文本链接点击PDF在HTML
- 如何修改标签文本?
- 在HTML中还有其他有用的空格码吗,比如半空格的 , em-spaces, en-spaces等等?
- 输入触发器按钮单击