如何通过 JavaScript 禁用 Chrome 的已保存密码提示设置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32775342/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to disable Chrome's saved password prompt setting through JavaScript
提问by Jay Ponkia
Is there any way to manipulate Chrome settings with the help of JavaScript or jQuery? I want to disable the save password pop-up bubble using JavaScript. How to do this?
有没有办法在 JavaScript 或 jQuery 的帮助下操作 Chrome 设置？我想使用 JavaScript 禁用保存密码弹出气泡。这该怎么做？
回答by Jay Ponkia
Now I am going to give answer on my own question.
现在我要回答我自己的问题。
It can be done in both chrome as well as in mozilla fire fox.
它可以在 chrome 和 mozilla fire fox 中完成。
For Chrome
铬
First of all you must have to remove the attribute "password" of input type.
首先，您必须删除输入类型的属性“密码”。
The main reason behind this is when you take input type = "text" and input type = "password" major browser shows that pop up. Because browsers have inbuilt functionality to show that pop up when you take input type = "password".
这背后的主要原因是当您输入 input type = "text" 和 input type = "password" 时，主要浏览器显示弹出。因为浏览器具有内置功能，可以在您输入 type = "password" 时显示弹出窗口。
Now we can manipulate chrome from this.
现在我们可以从这里操作 chrome。
Here is an example
这是一个例子
<html>
<head>
<title> Remove Save Password Pop Up For Chrome </title>
<style>
#txtPassword{
-webkit-text-security:disc;
}
</style>
</head>
<body>
<input type="text" id="txtUserName" />
<br />
<input type="text" id="txtPassword" />
<br />
</body>
</html>
It is css property that is used for changing text into bullets.
它是用于将文本更改为项目符号的 css 属性。
For Mozilla
对于 Mozilla
You cannot do this in mozilla. Because -moz-text-security is obsolete. It is not working in mozilla.
你不能在 mozilla 中做到这一点。因为 -moz-text-security 已过时。它在 mozilla 中不起作用。
But we can also manipulate mozilla.
但我们也可以操纵 mozilla。
Now there are list of character codes in html that is supported in all of the major browsers.
现在，所有主要浏览器都支持 html 中的字符代码列表。
From that character code for bullet is '•'. When you write this code in html it will print bullet like this "•"
子弹的那个字符代码是'•'。当您在 html 中编写此代码时，它会打印如下所示的项目符号“ •”
Now we can replace the text field with these bullets
现在我们可以用这些项目符号替换文本字段
But there is one limitation for this. You cannot print bullets inside the text box. But there is also solution for that limitation. Because everything is possible in programming world.
但这有一个限制。您不能在文本框中打印项目符号。但也有针对该限制的解决方案。因为在编程世界里一切皆有可能。
For that limitation we can make fake divthat shows bullets when you write password.
对于这个限制，我们可以制作假 div，在您输入密码时显示项目符号。
Here is an example.
这是一个例子。
<html>
<head>
<title> Remove Save Password Pop Up For Mozilla </title>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript">
<script>
function RemoveSavedPassword() {
if (jQuery.browser.webkit == undefined) {
inputValue = $('.real-input').val();
numChars = inputValue.length;
showText = "";
for (i = 0; i < numChars; i++) {
showText += "•";
}
$('.fake-input').html(showText);
}
}
</script>
</head>
<body>
<div class="input-box">
<label>Enter password:</label>
<div class="fake-input"></div>
<input type="text" onKeyUp="RemoveSavedPassword()" class="real-input">
</div>
</body>
</html>
Now there is magic of CSS. Magic means power of margin, padding, opacity and position attribute we can manipulate user.
现在有了 CSS 的魔力。魔法意味着我们可以操纵用户的边距、填充、不透明度和位置属性的力量。
Here is the link:
这是链接：
http://codepen.io/jay191193/pen/bVBPVa
http://codepen.io/jay191193/pen/bVBPVa
Security Issue
安全问题
For security issue of input type="text" instead of input type="password" you can visit this link:
对于 input type="text" 而不是 input type="password" 的安全问题，您可以访问此链接：
回答by Maximillian Laumeister
There isn't a way to change Chrome settings directly from JavaScript, so the following answer will focus on how to prevent that dialog from appearing for a specific HTML form.
无法直接从 JavaScript 更改 Chrome 设置，因此以下答案将重点介绍如何防止针对特定 HTML 出现该对话框form。
There aren't any great ways to do this as far as I can tell - from what I've read, the HTML5 autocomplete="off"attribute gets ignored in Chrome, so it will prompt to save the password even if you supply the attribute.
据我所知，没有什么好的方法可以做到这一点 - 从我读到的内容来看，HTML5autocomplete="off"属性在 Chrome 中被忽略，因此即使您提供了该属性，它也会提示保存密码。
There is a workaround though - if you set the passwordfield to be readonly until it is focused, Chrome will not prompt to save the credentials. Unfortunately there is no good clean solution that I know of, so that's why the solution I am posting is a little hacky.
不过有一个解决方法 - 如果您将该password字段设置为只读，直到它获得焦点，Chrome 将不会提示保存凭据。不幸的是，我知道没有好的干净的解决方案，所以这就是为什么我发布的解决方案有点老套。
Please view the JSFiddle in Chrome and try submitting each form to see the solution in action (you will need to reload the fiddle after you submit each time): https://jsfiddle.net/g0e559yn/2/
请在 Chrome 中查看 JSFiddle 并尝试提交每个表单以查看正在运行的解决方案（每次提交后都需要重新加载小提琴）：https: //jsfiddle.net/g0e559yn/2/
Full Code:
完整代码：
/* Chrome does not ask to save the password from this form */
<form id="form1" action="/">
Name:<br />
<input type="text" name="userid" />
<br />
Password:<br />
<input type="password" readonly onfocus="$(this).removeAttr('readonly');" />
<br />
<button type="submit" form="form1" value="Submit">Submit</button>
</form>
/*Chrome asks to save the password from this form */
<form id="form2" action="/">
Name:<br />
<input type="text" name="userid" />
<br />
Password:<br />
<input type="password" name="psw" />
<br />
<button type="submit" form="form2" value="Submit">Submit</button>
</form>
回答by Lucas Morgan
I've had success preventing this popup by adding the type="button"attribute to the <button>that is kicking off the event.
通过将type="button"属性添加到<button>启动事件的，我已经成功地阻止了这个弹出窗口。
I had understood browsers to accompany the "Do you want to save this login?" popup with any form submit, but I get this popup even when using a button outside a <form>. I am guessing that since a button by default is <button type="submit">, in some way clicking it is recognized as a form submit even if you're not using it in a <form>.
我已经理解浏览器伴随着“你想保存这个登录吗？” 弹出任何表单提交，但即使使用<form>. 我猜测，由于默认情况下按钮是<button type="submit">，因此即使您没有在<form>.
Tested in recent versions of Firefox, Chrome, Edge.
在最新版本的 Firefox、Chrome、Edge 中进行了测试。
回答by Aterr
I think I found rough, but working method to prevent browser saving password prompt. It might be not really beautiful solution, but it worked for me.
我想我找到了粗略但有效的方法来防止浏览器保存密码提示。这可能不是真正漂亮的解决方案，但它对我有用。
Made with jQuery.
用 jQuery 制作。
Hope it helps.
希望能帮助到你。
$('#modified span').on('click', function(e){
e.preventDefault();
$('#modified').submit();
});
//Clear the form on submit
$('form').on('submit', function(){
$('form input[type="text"], form input[type="password"]').val('');
});#modified input[type="submit"]{
pointer-events: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form>
<h1>Browser IS asking to save password</h1>
<input type="text" placeholder="Login"/>
<input type="password" placeholder="Password"/>
<input type="submit" value="Submit"/>
</form>
<form id="modified">
<h1>Browser IS NOT asking to save password</h1>
<input type="text" placeholder="Login"/>
<input type="password" placeholder="Password"/>
<span>
<input type="submit" value="Submit"/>
</span>
</form>回答by Bugfixer
This method work for me in chrome and mozilla, Using this in my projects:
这种方法在 chrome 和 mozilla 中对我有用，在我的项目中使用它：
<input type="text" name="email" onfocus="this.removeAttribute('readonly');" id="email" placeholder="Email Address" class="form-control" email="required email" required="">
Add onfocus="this.removeAttribute('readonly');"in your input type after this it wont remember any saved password.
onfocus="this.removeAttribute('readonly');"在此之后添加您的输入类型，它不会记住任何保存的密码。
回答by waza123
For Chrome and Firefox 2018
适用于 Chrome 和 Firefox 2018
ONLY IF YOU USE AJAX:
仅当您使用 AJAX 时：
After you check if login and password is ok, clear password input field:
检查登录名和密码是否正确后，清除密码输入字段：
$.post("/auth", {login: $("#login").val(), pass: $("#password").val(); }, function(data){
if (data == "auth is ok"){
// clear password field
$("#password").val(''); // <-- this will prevent browser to save password
}
});
