我正在尝试添加 autocomplete=new-password
某些用户编辑表单,但它未能遵循 Chrome 79 和 Firefox 71 中的正确行为。It's supposed to be supported in both browsers .
这里有什么问题?
我创建了两个非常简单的示例来消除对问题的任何外部干扰。它们可以从任何 HTTP 服务器(例如 php -S localhost:8999
)提供服务。第一个页面触发“保存登录”功能,但第二个页面不应该使用该信息来自动完成密码 - 然而,它确实如此。
<!-- login.htm -->
<html>
<head></head>
<body>
<form action="edit.htm" method="post">
<label>Login <input type="text" name="login" /></label></br>
<label>Password <input type="password" name="pwd" /></label><br />
<input type="submit">
</form>
</body>
</html>
<head></head>
<body>
<form>
<label>Login <input type="text" name="login" /></label></br>
<label>New Password <input type="password" name="pwd" autocomplete="new-password" /></label><br />
<input type="submit">
</form>
</body>
</html>
This is not exactly a dup from "how to use autocomplete=new-password" as the behavior seems to have changed or is ill-documented.
最佳答案
这似乎是浏览器强制页面以这种方式运行的问题/优势,并且在设置 时绝对没有解决此问题。自动完成=“新密码”或者即使您将该值设置为关闭。但似乎有一种解决方法可以解决由浏览器意外引起的这个问题。
- HTML方式:
您可以通过在表单顶部添加隐藏字段来分散浏览器的注意力来解决此问题
<!-- fake fields are a workaround for chrome/opera autofill getting the wrong fields -->
<input id="username" style="display:none" type="text" name="fakeusernameremembered">
<input id="password" style="display:none" type="password" name="fakepasswordremembered">
- JS方式:您只需将密码输入设置为只读即可更改其状态
<html>
<head></head>
<body>
<form>
<label>Login <input type="text" name="login"/></label></br>
<label>New Password <input type="password" id="password" name="pwd" readonly autocomplete="new-password"/></label><br/>
<input type="submit">
</form>
<script>
document.getElementById('password').onfocus = function() {
document.getElementById('password').removeAttribute('readonly');
};
</script>
</html>
关于html - Chrome/Firefox 自动完成=新密码不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59991469/