javascript - 如何防止从 Web 浏览器中的登录页面保存凭据

Question

我正在寻找一些解决方法，如何在填写后禁用网络浏览器中的保存凭据功能。我找到了几种解决方案，但它们都不适用于所有浏览器(所有解决方案都是旧的，作者测试了这些“hacks” "在较旧的浏览器版本中)。我已经在 Chrome、FF、Opera、IE(当前版本)上进行了测试。大多数情况下只有 FF 有问题，它总是想保存凭证。有人可以帮助我吗？

这里有一些适用于除 FF 以外的所有浏览器的解决方案。

<form action="test.php"  method="post" autocomplete="off">
  Username:
  <input type="text" name="username" autocomplete="off" readonly 
   onfocus="this.removeAttribute('readonly');" >
  Password:
  <input type="password" name="password" autocomplete="off" readonly 
  onfocus="this.removeAttribute('readonly');" >
  <input type="submit" value="Login">
</form> //works for Chrome, IE, Opera; doesn't work FF.

2.)

 <form action="test.php"  method="post" autocomplete="off">
    <div style="display:none">
        <input type="password" tabindex="-1"/>
      </div>
      Username:
     <input type="text" name="username" placeholder="username"/>
    Password:  
    <input type="password" name="password" placeholder="password"/>
      <input type="submit" value="Login">
    </form> //works for Chrome, IE, Opera; doesn't work FF.

3.)

<form action='test.php' class='login-form' autocomplete='off'>
  Username:
  <input type='user' name='username'>
  <input type='hidden' name='user'>

  Password:
  <input type='password' name='password'>
  <input type='hidden' name='password'>
</form> //works for Chrome, IE, Opera; doesn't work FF.

4.)

    <form action="test.php"  method="post" autocomplete="off">
  Username:
  <input type="text" name="username" autocomplete="off" readonly onfocus="this.removeAttribute('readonly');"
   onfocusout="this.setAttribute('readonly','readonly');" >

  Password:
  <input type="password" name="password" autocomplete="off" readonly onfocus="this.removeAttribute('readonly');"
  onfocusout="this.setAttribute('readonly','readonly');" >
  <input type="submit" value="Login">
</form> //works for Chrome, IE, Opera; doesn't work FF.

5.)

 Username: 
<input type="text" id="username" name="username"/>
 Password:
<input type="password" id="password" name="password"/>


<form id="theForm" action="test.php" method="post">
  <input type="hidden" id="hiddenUsername" name="username"/>
  <input type="hidden" id="hiddenPassword" name="password"/>
  <input type="submit" value="Login"/>
</form>


<script type="text/javascript" language="JavaScript">
  $("#theForm").submit(function() {
    $("#hiddenUsername").val($("#username").val());
    $("#hiddenPassword").val($("#password").val());
  });
  $("#username,#password").keypress(function(e) {
    if (e.which == 13) {
      $("#theForm").submit();
    }
  });
</script>

Answer 1

在第一个解决方案中，您需要添加:

onfocusout="this.setAttribute('readonly','readonly');"