如何在主要浏览器中为特定输入（或表单域）禁用自动完成功能？
【问题讨论】：
标签： html forms browser autocomplete
我必须在这个讨论上花了两天时间才开始创建自己的解决方案：
首先，如果它适用于该任务，请放弃 input 并使用 textarea。据我所知，自动填充/自动完成在textarea 中没有任何业务，就我们想要实现的目标而言，这是一个很好的开始。现在您只需更改该元素的一些默认行为，使其表现得像 input。
接下来，您需要将所有较长的条目（例如 input）保留在同一行，并且您希望 textarea 使用光标沿 y 轴滚动。我们还想摆脱调整大小框，因为我们正在尽最大努力模仿input 的行为，它没有调整大小句柄。我们通过一些快速的 CSS 实现了所有这些：
#your-textarea {
resize: none;
overflow-y: hidden;
white-space: nowrap;
}最后，您需要确保讨厌的滚动条不会破坏聚会（对于那些特别长的条目），因此请确保您的文本区域不显示它：
#your-textarea::-webkit-scrollbar {
display: none;
}简单易懂。此解决方案的自动完成问题为零。
【讨论】：
自动填充功能在不选择字段的情况下更改值。我们可以在状态管理中使用它来忽略 select 事件之前的状态变化。
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 框架。
【讨论】：
很遗憾，该选项在大多数浏览器中已被删除，因此无法禁用密码提示。
直到今天，我还没有找到解决这个问题的好方法。我们现在剩下的就是希望有一天这个选项会回来。
【讨论】：
将输入设为只读
<input type="text" name="name" readonly="readonly">
超时后删除只读
$(function() {
setTimeout(function() {
$('input[name="name"]').prop('readonly', false);
}, 50);
});
【讨论】：
可以这么说，我想要一些完全脱离浏览器控制的字段管理。在这个例子中，有一个标准的文本输入字段来捕获密码——没有电子邮件、用户名等......
<input id='input_password' type='text' autocomplete='off' autofocus>
有一个名为“input”的变量，设置为空字符串...
var input = "";
字段事件由jQuery监控...
$("#input_password").off().on("focus", function(event) {
$(this).val("");
input = "";
}).on("keypress", function(event) {
event.preventDefault();
if (event.key !== "Enter" && event.key.match(/^[0-9a-z!@#\$%&*-_]/)) {
$(this).val( $(this).val() + "•" );
input += event.key;
}
else if (event.key == "Enter") {
var params = {};
params.password = input;
$.post(SERVER_URL, params, function(data, status, ajax) {
location.reload();
});
}
}).on("keyup", function(event) {
var navigationKeys = ["Home", "End", "ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"];
if ($.inArray(event.key, navigationKeys) > -1) {
event.preventDefault();
$(this).val("");
input = "";
}
else if (event.key == "Backspace") {
var length = $(this).val().length - 1 > 0 ? $(this).val().length : 0;
input = input.substring(0, length);
}
});
前端总结
本质上，这不会给浏览器带来任何有用的信息。即使它覆盖了自动完成设置，和/或显示带有先前输入值的下拉列表，它所拥有的只是为字段值存储的项目符号。
服务器详情（可选阅读）
如上所示，一旦服务器返回 JSON 响应，JavaScript 就会执行 location.reload()。 （此登录技术用于访问受限管理工具。一些与 cookie 内容相关的过度杀伤力可以跳过以获得更通用的实现。）以下是详细信息：
【讨论】：
（2021 年适用于 Chrome（v88、89、90）、Firefox、Brave 和 Safari。）
这里已经写的旧答案可以反复试验，但大多数 他们没有链接到任何官方文档或 Chrome 对此有何评论 问题。
问题中提到的问题是由于 Chrome 的自动填充功能，这是 Chrome 在此错误链接中的立场 - Issue 468153: autocomplete=off is ignored on non-login INPUT elements, Comment 160
简单来说，有两种情况-
[CASE 1]：您的input 类型不是password。在这种情况下，解决方案很简单，分为三个步骤。
将name 属性添加到input
name 不应以电子邮件或用户名之类的值开头。否则 Chrome 仍然会显示下拉菜单。例如，name="emailToDelete" 显示下拉列表，但 name="to-delete-email" 不显示。 autocomplete 属性也是如此。
添加autocomplete 属性，并添加一个对您有意义的值，例如new-field-name
它看起来像这样，在你的余生中你不会再看到这个输入的自动填充 -
<input type="text/number/something-other-than-password" name="x-field-1" autocomplete="new-field-1" />
input type 是 password
2 MDN 关于关闭自动补全的详细文档 - How to turn off form autocompletion
【讨论】：
autocomplete = 'off' 对我不起作用，无论如何我将输入字段的 value 属性设置为空格，即 <input type='text' name='username' value=" "> 将默认输入字符设置为空格，并且由于用户名是空白密码也被清除了。
【讨论】：
所提供的答案均不适用于我测试的所有浏览器。在已经提供的答案的基础上，这就是我在 Chrome 61、Microsoft Edge 40 (EdgeHTML 15)、IE 11 上得到的结果（测试） strong>、Firefox 57、Opera 49 和 Safari 5.1。由于许多试验，它很古怪；但是它确实对我有用。
<form autocomplete="off">
...
<input type="password" readonly autocomplete="off" id="Password" name="Password" onblur="this.setAttribute('readonly');" onfocus="this.removeAttribute('readonly');" onfocusin="this.removeAttribute('readonly');" onfocusout="this.setAttribute('readonly');" />
...
</form>
<script type="text/javascript">
$(function () {
$('input#Password').val('');
$('input#Password').on('focus', function () {
if (!$(this).val() || $(this).val().length < 2) {
$(this).attr('type', 'text');
}
else {
$(this).attr('type', 'password');
}
});
$('input#Password').on('keyup', function () {
if (!$(this).val() || $(this).val().length < 2) {
$(this).attr('type', 'text');
}
else {
$(this).attr('type', 'password');
}
});
$('input#Password').on('keydown', function () {
if (!$(this).val() || $(this).val().length < 2) {
$(this).attr('type', 'text');
}
else {
$(this).attr('type', 'password');
}
});
</script>
【讨论】：
已修复。只需在真实输入字段上方添加即可
https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion - MDN https://medium.com/paul-jaworski/turning-off-autocomplete-in-chrome-ee3ff8ef0908 - 中等 在 EDGE、Chrome(最新 v63)、Firefox Quantum (57.0.4 64-бит)、Firefox(52.2.0) 上测试 假字段是 chrome/opera 自动填充获取错误字段的一种解决方法
const fakeInputStyle = {opacity: 0, float: 'left', border: 'none', height: '0', width: '0'}
<input type="password" name='fake-password' autoComplete='new-password' tabIndex='-1' style={fakeInputSyle} />
<TextField
name='userName'
autoComplete='nope'
...
/>
<TextField
name='password'
autoComplete='new-password'
...
/>
【讨论】：
我能够通过添加两个假输入并为它们提供绝对位置来阻止 Chrome 66 自动填充：
<form style="position: relative">
<div style="position: absolute; top: -999px; left: -999px;">
<input name="username" type="text" />
<input name="password" type="password" />
</div>
<input name="username" type="text" />
<input name="password" type="password" />
起初，我尝试将 display:none; 添加到输入中，但 Chrome 忽略了它们并自动填充可见的。
【讨论】：
这对我来说就像一个魅力。
<form autocomplete="off"> <input type="text" autocomplete="off" style="display:none"> </form>
【讨论】：
我已经解决了在页面加载后放置这段代码的问题：
<script>
var randomicAtomic = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
$('input[type=text]').attr('autocomplete',randomicAtomic);
</script>
【讨论】：
最简单的答案是
<input autocomplete="on|off">
但请记住浏览器支持。目前，
支持自动完成属性Chrome 17.0 和最新版本
IE 5.0 和最新版本
Firefox 4.0 和最新版本
Safari 5.2 和最新版本
Opera 9.6 和最新版本
【讨论】：
我的 jQuery 解决方案。 它可能不是 100% 可靠的，但它对我有用。 这个想法在代码注释中描述。
/**
* Prevent fields autofill for fields.
* When focusing on a text field with autocomplete (with values: "off", "none", "false") we replace the value with a new and unique one (here it is - "off-forced-[TIMESTAMP]"),
* the browser does not find this type of autocomplete in the saved values and does not offer options.
* Then, to prevent the entered text from being saved in the browser for a our new unique autocomplete, we replace it with the one set earlier when the field loses focus or when user press Enter key.
* @type {{init: *}}
*/
var PreventFieldsAutofill = (function () {
function init () {
events.onPageStart();
}
var events = {
onPageStart: function () {
$(document).on('focus', 'input[autocomplete="off"], input[autocomplete="none"], input[autocomplete="false"]', function () {
methods.replaceAttrs($(this));
});
$(document).on('blur', 'input[data-prev-autocomplete]', function () {
methods.returnAttrs($(this));
});
$(document).on('keydown', 'input[data-prev-autocomplete]', function (event) {
if (event.keyCode == 13 || event.which == 13) {
methods.returnAttrs($(this));
}
});
$(document).on('submit', 'form', function () {
$(this).find('input[data-prev-autocomplete]').each(function () {
methods.returnAttrs($(this));
});
});
}
};
var methods = {
/**
* Replace value of autocomplete and name attribute for unique and save the original value to new data attributes
* @param $input
*/
replaceAttrs: function ($input) {
var randomString = 'off-forced-' + Date.now();
$input.attr('data-prev-autocomplete', $input.attr('autocomplete'));
$input.attr('autocomplete', randomString);
if ($input.attr('name')) {
$input.attr('data-prev-name', $input.attr('name'));
$input.attr('name', randomString);
}
},
/**
* Restore original autocomplete and name value for prevent saving text in browser for unique value
* @param $input
*/
returnAttrs: function ($input) {
$input.attr('autocomplete', $input.attr('data-prev-autocomplete'));
$input.removeAttr('data-prev-autocomplete');
if ($input.attr('data-prev-name')) {
$input.attr('name', $input.attr('data-prev-name'));
$input.removeAttr('data-prev-name');
}
}
};
return {
init: init
}
})();
PreventFieldsAutofill.init();.input {
display: block;
width: 90%;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<form action="#">
<p>
<label for="input-1">Firts name without autocomplete</label><br />
<input id="input-1" class="input" type="text" name="first-name" autocomplete="off" placeholder="Firts name without autocomplete" />
</p>
<p>
<label for="input-2">Firts name with autocomplete</label><br />
<input id="input-2" class="input" type="text" name="first-name" autocomplete="given-name" placeholder="Firts name with autocomplete" />
</p>
<p>
<button type="submit">Submit form</button>
</p>
</form>【讨论】：
只需尝试将值为“off”的属性自动完成设置为输入类型。
<input type="password" autocomplete="off" name="password" id="password" />
【讨论】：
<input type="text" name="attendees" id="autocomplete-custom-append">
<script>
/* AUTOCOMPLETE */
function init_autocomplete() {
if (typeof ($.fn.autocomplete) === 'undefined') {
return;
}
// console.log('init_autocomplete');
var attendees = {
1: "Shedrack Godson",
2: "Hellen Thobias Mgeni",
3: "Gerald Sanga",
4: "Tabitha Godson",
5: "Neema Oscar Mracha"
};
var countriesArray = $.map(countries, function (value, key) {
return {
value: value,
data: key
};
});
// initialize autocomplete with custom appendTo
$('#autocomplete-custom-append').autocomplete({
lookup: countriesArray
});
};
</script>
【讨论】：
document.addEventListener('DOMContentLoaded', changeInputsType);
function changeInputsType() {
setTimeout(function() {
$(/*selector*/).prop("type", "password").show();
}, 1000);
}【讨论】：
关于 Internet Explorer 11，有一个可用于阻止自动完成的安全功能。
它是这样工作的：
在 JavaScript 中修改的任何表单输入值在用户已经输入它之后被标记为不符合自动完成的条件。
此功能通常用于保护用户免受恶意网站在您输入密码后想要更改您的密码等。
但是，您可以在密码字符串的开头插入一个特殊字符来阻止自动完成。稍后可以检测到此特殊字符并将其删除。
【讨论】：
每次只需将input 元素中的name 属性更改为唯一，它就再也不会自动完成了！
一个例子可能是最后添加的时间 tic。您的服务器只需要解析文本的第一部分 name 即可取回值。
<input type="password" name="password_{DateTime.Now.Ticks}" value="" />
【讨论】：
我已经在这里发布了解决方案：Disable Chrome Autofill creditcard
解决方法是将自动完成属性设置为“cc-csc”，该值是信用卡的CSC，并且不允许存储它！ （暂时……）
autocomplete="cc-csc"
【讨论】：
在尝试了所有解决方案之后（有些解决了部分问题，禁用了自动填充但没有自动完成，有些根本不起作用），我发现截至 2020 年最好的解决方案是添加 type="search" 和 autocomplete="off " 到您的输入元素。像这样：
<input type="search" /> or <input type="search" autocomplete="off" />
还要确保在表单元素上设置了 autocomplete="off"。 这完美地工作并禁用自动完成和自动填充。
此外，如果您使用 type="email" 或任何其他文本类型，则需要添加 autocomplete="new-email" ，这将完全禁用两者。 type="password" 也是如此。只需将“new-”前缀与类型一起添加到自动完成中。 像这样：
<input type="email" autocomplete="new-email" />
<input type="password" autocomplete="new-password" />
【讨论】：
我已经为这场永无止境的战斗奋斗了很久......所有的技巧和黑客行为最终都会失效，就好像浏览器开发人员正在阅读这个问题一样。
我不想随机化字段名称、接触服务器端代码、使用大量 JS 技巧并希望将“hacks”保持在最低限度。所以这就是我想出的：
TL;DR 使用input 而不使用name 或id！并在隐藏字段中跟踪更改
<!-- input without the "name" or "id" -->
<input type="text" oninput="this.nextElementSibling.value=this.value">
<input type="hidden" name="email" id="email">
显然适用于所有主要浏览器。
附：已知的小问题：
id 或name 引用此字段。但是你可以使用 CSS 类。或者在 jQuery 中使用 $(#email').prev();。或者想出另一个解决方案（有很多）。oninput 和 onchange 事件不会触发。因此，相应地修改您的代码以反映隐藏字段中的更改。【讨论】：
要禁用表单中文本的自动完成功能，请使用 和 元素的 autocomplete 属性。您需要此属性的“关闭”值。
这可以在一个完整的表单或特定元素中完成：
表格
<form action="#" method="GET" autocomplete="off">
</form>
输入
<input type="text" name="Name" placeholder="First Name" autocomplete="off">
【讨论】：
只需 autocomplete="off" list="autocompleteOff" 输入您的输入并为 IE/Edge 完成工作！对于 chrome 添加 autocomplete="new password"
【讨论】：
多年来，我一直在努力实现自动完成功能。我已经尝试了每一个建议，但对我没有任何帮助。 通过 jQuery 2 属性添加效果很好：
$(document).ready( function () {
setTimeout(function() {
$('input').attr('autocomplete', 'off').attr('autocorrect', 'off');
}, 10);
});
将生成 HTML
<input id="start_date" name="start_date" type="text" value="" class="input-small hasDatepicker" autocomplete="off" placeholder="Start date" autocorrect="off">
【讨论】：
Chrome 一直在尝试强制自动完成。所以你需要做一些事情。
输入字段的属性id 和name 不需要是可识别的。所以没有姓名、电话、地址等值。
相邻的标签或 div 也需要不可识别。但是，您可能想知道，用户如何知道？好吧，您可以使用content 对::after 做一个有趣的小技巧。您可以将其设置为一个字母。
<label>Ph<span class='o'></span>ne</label>
<input id='phnbr' name='phnbr' type='text'>
<style>
span.o {
content: 'o';
}
</style>
【讨论】：
这适用于 Chrome 84.0.4147.105
1。将文本类型分配给密码字段并添加一个类，例如“假密码类型”
<input type="text" class="fakepasswordtype" name="password1">
<input type="text" class="fakepasswordtype" name="password2">
2。然后在第一次输入完成时使用jQuery将类型改回密码
jQuery(document).ready(function($) {
$('.fakepasswordtype').on('input', function(e){
$(this).prop('type', 'password');
});
});
这阻止了 Chrome 的自动填充令人讨厌的丑陋行为。
【讨论】：
您可以在属性nameemail 地址中添加名称到您的表单并生成电子邮件值。例如：
<form id="something-form">
<input style="display: none" name="email" value="randomgeneratevalue"></input>
<input type="password">
</form>
如果您使用此方法，谷歌浏览器将无法插入自动填充密码。
【讨论】：
非常简单的解决方案只需更改标签名称和字段名称，而不是更通用的名称，例如：姓名、联系人、电子邮件。 使用“邮寄至”而不是“电子邮件”。 浏览器会忽略这些字段的自动完成功能。
【讨论】：
定义输入的属性 type="text" 以及 autocomplete="off" 足以为我关闭自动完成功能。
除了 type="password"，我尝试使用 JavaScript 挂钩 onfocus/onfocusout 事件从其他人的建议切换只读属性工作正常，但是当密码字段编辑开始为空时，自动完成密码再次出现。
我建议使用 JavaScript 挂钩 oninput 事件来切换关于密码长度的类型属性，除了上述工作良好的解决方法..
<input id="pwd1" type="text" autocomplete="off" oninput="sw(this)" readonly onfocus="a(this)" onfocusout="b(this)" />
<input id="pwd2" type="text" autocomplete="off" oninput="sw(this)" readonly onfocus="a(this)" onfocusout="b(this)" />
和 JavaScript..
function sw(e) {
e.setAttribute('type', (e.value.length > 0) ? 'password' : 'text');
}
function a(e) {
e.removeAttribute('readonly');
}
function b(e) {
e.setAttribute('readonly', 'readonly');
}
【讨论】：