Eli*_*ria 44 html google-chrome autocomplete autofill
我们如何在某些<input>页面上禁用Chrome的自动填充功能,以防止在页面加载时自动填充它们？
同时我需要启用自动完成功能,因此用户仍然可以通过单击输入或键入输入来查看建议列表.可以这样做吗？
编辑:如果您认为有必要,或者您觉得它会使您的解决方案更简单,请随意使用普通的Javascript或jQuery.
Mir*_*318 68
这是你想要的魔力:
autocomplete="new-password"
Chrome故意忽略autocomplete="off"和autocomplete="false".但是,他们提出new-password了一个特殊条款来阻止新密码表单被自动填充.
我将上面的行放在我的密码输入中,现在我可以编辑表单中的其他字段,密码不会自动填写.
小智 43
有点晚了,但这是我的傻瓜证明解决方案,对于用户必须输入新密码的注册/注册页面等页面非常有用.
<form method="post">
<input type="text" name="fname" id="firstname" x-autocompletetype="given-name" autocomplete="on">
<input type="text" name="lname" id="lastname" x-autocompletetype="family-name" autocomplete="on">
<input type="text" name="email" id="email" x-autocompletetype="email" autocomplete="on">
<input type="password" name="password" id="password_fake" class="hidden" autocomplete="off" style="display: none;">
<input type="password" name="password" id="password" autocomplete="off">
</form>
Chrome会检测两个密码输入,但不会自动填写密码字段.但是,字段id ="password_fake"将通过CSS隐藏.因此用户只能看到一个密码字段.
我还添加了一些额外的属性"x-autocompletetype",这是一个chrome实验特定的自动填充功能.在我的示例中,chrome将自动填充名字,姓氏和电子邮件地址,而不是密码字段.
dsu*_*ess 24
修复:阻止浏览器自动填充
<input type="password" readonly onfocus="this.removeAttribute('readonly');"/>
更新:Mobile Safari将光标设置在字段中,但不显示虚拟键盘.New Fix像以前一样工作,但处理虚拟键盘:
<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
解释 如果用户聚焦此输入字段(焦点包含鼠标单击和通过字段选项卡),则此代码段不是填充空格或窗口加载函数,而是设置只读模式并更改为可写.
不需要jQuery,纯JavaScript.
Dip*_*nia 11
经过多次努力,我发现解决方案比你想象的要简单得多:
而autocomplete="off"不仅仅是简单地使用autocomplete="false";)
试试这个...
$(document).ready(function () {
$('input').attr('autocomplete', 'false');
});
我偶然发现了今天奇怪的镀铬自动填充行为.碰巧在没有明显原因的情况下启用了名为"embed"和"postpassword"(填写登录名和密码)的字段.这些字段已经自动完成设置为关闭.
所描述的方法似乎都不起作用.另一个答案的方法都没有效果.我基于斯蒂尔的答案得出了我自己的想法(它可能确实有效,但我在我的应用程序中需要固定的后期数据格式):
在真实密码之前,添加这两个虚拟字段:
<input type='text' style='display: none'>
<input type='password' style='display: none'>
只有这一个最终为我的表单完全禁用自动填充.
令人遗憾的是,禁用这种基本行为就是那种艰难和苛刻的行为.
一种解决方案是用空白字符自动填充输入，并使它们清晰地聚焦。
示例： http: //nfdb.net/autofill.php
<!doctype html>
<html>
<head>
<title>Autofill Test</title>
<script>
var userfield;
// After the document has loaded, manipulate DOM elements.
window.addEventListener('load', function() {
// Get the username field element.
userfield = document.getElementById('user');
// Listen to the 'focus' event on the input element.
userfield.addEventListener('focus', function() {
// Checks if the value is the EM space character,
// and removes it when the input is recieves focus.
if (this.value == '\u2003') this.value = ''
}, false);
// Listen to the 'blur' event on the input element.
// Triggered when the user focuses on another element or window.
userfield.addEventListener('blur', function() {
// Checks if the value is empty (the user hasn't typed)
// and inserts the EM space character if necessary.
if (this.value == '') this.value = '\u2003';
}, false);
}, false);
</script>
</head>
<body>
<form method="GET" action="">
<input id="user" name="username" type="text" value=" "/><br/>
<input name="password" type="password" value=""/><br/>
<input type="submit" value="Login">
</form>
</body>
</html>
这应该会阻止浏览器自动填充字段，但仍允许它们自动完成。
这是另一个在页面加载后清除表单输入的示例。此方法的优点是输入中永远不会有任何空白字符，缺点是自动填充的值在几毫秒内可见的可能性很小。
<!doctype html>
<html>
<head>
<title>Autofill Test</title>
<script>
var userfield, passfield;
// Wait for the document to load, then call the clear function.
window.addEventListener('load', function() {
// Get the fields we want to clear.
userfield = document.getElementById('user');
passfield = document.getElementById('pass');
// Clear the fields.
userfield.value = '';
passfield.value = '';
// Clear the fields again after a very short period of time, in case the auto-complete is delayed.
setTimeout(function() { userfield.value = ''; passfield.value = ''; }, 50);
setTimeout(function() { userfield.value = ''; passfield.value = ''; }, 100);
}, false);
</script>
</head>
<body>
<div>This form has autofill disabled:</div>
<form name="login" method="GET" action="./autofill2.php">
<input id="user" name="username" type="text" value=""/><br/>
<input id="pass" name="password" type="password" value=""/><br/>
<input type="submit" value="Login">
</form>
<div>This form is untouched:</div>
<form name="login" method="GET" action="./autofill2.php">
<input name="username" type="text" value=""/><br/>
<input name="password" type="password" value=""/><br/>
<input type="submit" value="Login">
</form>
</body>
</html>