如何通过 JavaScript 禁用 Chrome 的已保存密码提示设置
现在我要回答我自己的问题。
它可以在 chrome 和 mozilla fire fox 中完成。
铬
首先,您必须删除输入类型的属性“密码”。
这背后的主要原因是当您输入 input type = "text" 和 input type = "password" 时,主要浏览器显示弹出。因为浏览器具有内置功能,可以在您输入 type = "password" 时显示弹出窗口。
现在我们可以从这里操作 chrome。
这是一个例子
<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>
它是用于将文本更改为项目符号的 css 属性。
对于 Mozilla
你不能在 mozilla 中做到这一点。因为 -moz-text-security 已过时。它在 mozilla 中不起作用。
但是我们也可以操纵 mozilla。
现在,所有主要浏览器都支持 html 中的字符代码列表。
子弹的那个字符代码是'•'。当您在 html 中编写此代码时,它会打印如下所示的项目符号“ • ”
现在我们可以用这些项目符号替换文本字段
但这有一个限制。您不能在文本框中打印项目符号。但是也有针对该限制的解决方案。因为在编程世界里一切皆有可能。
对于这个限制,我们可以制作假 div,在您输入密码时显示项目符号。
这是一个例子。
<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>
现在有了 CSS 的魔力。魔法意味着我们可以操纵用户的边距、填充、不透明度和位置属性的力量。
这是链接:
http://codepen.io/jay191193/pen/bVBPVa
安全问题
对于 input type="text" 而不是 input type="password" 的安全问题,您可以访问此链接:
无法直接从 JavaScript 更改 Chrome 设置,因此以下答案将重点介绍如何防止针对特定 HTML 出现该对话框form
。
据我所知,没有什么好的方法可以做到这一点 - 从我读到的内容来看,HTML5autocomplete="off"
属性在 Chrome 中被忽略,因此即使您提供了该属性,它也会提示保存密码。
不过有一个解决方法 - 如果您将该password
字段设置为只读,直到它获得焦点,Chrome 将不会提示保存凭据。不幸的是,我知道没有好的干净的解决方案,所以这就是为什么我发布的解决方案有点老套。
请在 Chrome 中查看 JSFiddle 并尝试提交每个表单以查看正在运行的解决方案(您每次提交后都需要重新加载小提琴):https : //jsfiddle.net/g0e559yn/2/
完整代码:
/* 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>
通过将type="button"
属性添加到<button>
启动事件的,我已经成功地阻止了这个弹出窗口。
我已经理解浏览器伴随着“你想保存这个登录吗?” 弹出任何表单提交,但即使使用<form>
. 我猜测,由于默认情况下按钮是<button type="submit">
,因此即使您没有在<form>
.
在最新版本的 Firefox、Chrome、Edge 中进行了测试。
我想我找到了粗略但有效的方法来防止浏览器保存密码提示。这可能不是真正漂亮的解决方案,但它对我有用。
用 jQuery 制作。
希望能帮助到你。
$('#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>
这种方法在 chrome 和 mozilla 中对我有用,在我的项目中使用它:
<input type="text" name="email" onfocus="this.removeAttribute('readonly');" id="email" placeholder="Email Address" class="form-control" email="required email" required="">
onfocus="this.removeAttribute('readonly');"
在此之后添加您的输入类型,它不会记住任何保存的密码。