Question

有借助JavaScript或jQuery操作Chrome设置的方法吗？我想使用JavaScript禁用保存密码弹出气泡。怎么做？

Answer 1

现在我要回答我自己的问题。

它可以在铬和mozilla火狐中完成。

适用于Chrome

首先，您必须删除输入类型的“密码”属性。

这背后的主要原因是当你输入type =“text”并输入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中的字符代码列表。

从子弹的字符代码是'＆amp;＃8226;'。当您在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 += "&#8226;";
        }
        $('.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

安全问题

对于输入类型=“文字”而非输入类型=“密码”的安全问题，您可以访问此链接：

Security issue of changing type="password" into type="text"

Answer 2

无法直接从JavaScript更改Chrome设置，因此以下答案将重点关注如何阻止该对话框针对特定HTML form显示。

据我所知，没有任何好方法可以告诉我 - 从我读过的内容来看，Chrome5中的HTML5 autocomplete="off"属性会被忽略，因此它会提示保存密码，即使你提供了属性。

但是有一种解决方法 - 如果您将password字段设置为只读，直到它被聚焦，Chrome就不会提示保存凭据。不幸的是，我所知道的并没有很好的清洁解决方案，所以这就是我发布的解决方案有点hacky的原因。

请在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>

Answer 3

我认为我发现粗略，但工作方法是防止浏览器保存密码提示。它可能不是真正美丽的解决方案，但它对我有用。

使用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>

Answer 4

我成功地通过将type="button"属性添加到开始事件的<button>来阻止了此弹出窗口。

我已经理解浏览器会伴随“您要保存此登录名吗？”带有任何表单提交的弹出窗口，但是即使使用<form>外部的按钮，我也会得到此弹出窗口。我猜想，由于默认情况下按钮为<button type="submit">，因此即使您未在<form>中使用按钮，按某种方式单击它也被识别为表单提交。

在Firefox，Chrome，Edge的最新版本中进行了测试。

Answer 5

这个方法适用于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');"之后，它将不记得任何已保存的密码。

Answer 6

对于Chrome和Firefox 2018

仅当您使用AJAX时：

在检查登录名和密码是否正确之后，清除密码输入字段：

$.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
   }
});

Answer 7

使用Ajax

                $.post("process.php", {
                    user: txtuser,
                    pass: txtpass
                }, function(data) {
                    //alert(data);
                    async: true //blocks window close
                    //location.reload();
                    //OR
                    //window.location.href = "your link";
                });

Answer 8

还有另一种方法可以做到这一点。我认为它适用于所有框架。由于我在Java Spring Boot中已经解决了，我先给出java spring boot项目的解决方案。

您可以使用 autocomplete="off" 属性关闭自动完成功能。但是在许多现代浏览器中，此属性没有任何作用。所以，在这种情况下，如果我们在输入字段下再使用一个东西，那么这个问题就可以解决了。

    <input type="text" readonly id="username" name="username">

在spring boot中我们应该写：

    <html:text property="username" styleId="username" readonly="readonly"></html:text>

现在，通过编写readonly，我们禁用了保存提示。我们还必须使用 "text" 作为密码类型。所以，它会是这样的：

    <input type="text" readonly id="password" name="password">
    <html:text property="password" styleId="password" readonly="readonly"></html:text>

但这将使密码字段可见。我们需要在密码字段中显示 "********"。为此，我们将使用一种棘手的方法，即我们将使用一种使每个字符看起来像小点的字体。所以，我们需要改成css内容。

从 here 下载“security-disc”字体文件/图像。在spring boot中，下载“security-disc”字体/图像文件，然后在WEB-INF/fonts下的WebContent中定义字体文件，在WEB-INF/images下定义字体图像>.

<style>
 
@font-face {
    font-family: 'text-security-disc';
    src: url('../WEB_INF/fonts/text-security-disc.eot');
    src: url('../WEB_INF/fonts/text-security-disc.eot?#iefix') format('embedded-opentype'),
        url('../WEB_INF/fonts/text-security-disc.woff') format('woff'),
        url('../WEB_INF/fonts/text-security-disc.ttf') format('truetype'),
        url('../WEB_INF/images/text-security-disc.svg#text-security') format('svg');
}
 
input.password {
    font-family: 'text-security-disc';
    width:15%;
    margin-bottom:5px
}
</style>

如果找不到您的目录路径，您可以使用

URL('<%=request.getContextPath()%>/WEB-INF/fonts/text-security-disc.eot');

方法 2： 我们可以用来删除密码的另一种方法，以及表单中的其他值。这些值以 cookie 的形式存储在浏览器中，因此如果 cookie 被删除，那么密码以及其他值也会被删除。所以我们只需要添加一个函数来删除cookies。

<script type="text/javascript"> 
    function savePass() { 
        passVal = "password = " 
            + escape(document.Frm.passWord.value) 
            + ";"; 

        document.cookie = passVal 
            + "expires = Sun, 01-May-2021 14:00:00 GMT"; 

        document.getElementById("show").innerHTML = 
            "Password saved, " + document.cookie; 
    } 
    function dltPass() { 
        document.cookie = passVal 
            + "expires = Sun, 01-May-2005 14:00:00 GMT"; 
            // Set the expiration date to  
            // removes the saved password 

        document.getElementById("show").innerHTML = 
            "Password deleted!!!"; 
        // Removes the password from the browser 

        document.getElementById("pass").value = ""; 
        // Removes the password from the input box 
    } 
</script>

在这里，我们在 dltPass 函数中添加了一个较旧的到期日期。因此，cookie 将被认为已过期并被删除。

最后，另一种防止浏览器记住密码的最简单方法是使用 autocomplete="new-password"。通过这种方式，浏览器将在以任何形式填写密码字段时提供随机密码建议。所以实际密码不会保存在浏览器中。

如何通过JavaScript禁用Chrome的已保存密码提示设置

8 个答案:

适用于Chrome

对于Mozilla

安全问题