前端解决使用input框的自动填充和浏览器缓存密码问题

浏览器的自动填充和密码缓存功能确实可以方便用户，但是在某些情况下，可能不希望浏览器自动填充表单或者缓存密码。下面是一些解决这个问题的方法：

1. autocomplete 属性

你可以在表单或输入字段上使用 autocomplete 属性来控制浏览器的自动填充行为。设置 autocomplete=“off” 可以阻止浏览器自动填充表单。例如：

<form autocomplete="off">  
  <input type="text" name="username" autocomplete="off">  
  <input type="password" name="password" autocomplete="off">  
</form>
1
2
3
4

请注意，某些浏览器可能会忽略这个属性，仍然提供自动填充功能。

注意：如果不需要密文就直接加上属性autocomplete="new-password"就解决了。

2. 新的随机名称

如果你不希望某个特定的密码被缓存，你可以使用一个随机名称来替代实际的密码字段。例如，你可以将密码字段的名称从 “password” 改为 “p_sswrd”。

3. 输入类型

使用 input 元素的 type 属性，比如 type=“password”，来确保输入的内容被隐藏。这样，即使浏览器缓存了密码，其他人也无法看到。

4. CSS样式

使用CSS样式来隐藏密码字段的值。例如，你可以使用 input[type=“password”] { -webkit-text-security: disk; } 来在输入时显示圆点而不是实际的字符。

5. JavaScript

使用JavaScript来监听自动填充事件，并在自动填充发生时执行一些操作，比如清空表单或提醒用户。例如：

javascript
window.addEventListener('DOMContentLoaded', function() {  
  var inputs = document.querySelectorAll('input, textarea, select');  
  for (var i = 0; i < inputs.length; i++) {  
    inputs[i].addEventListener('input', function() {  
      if (this.value === '') {  
        this.placeholder = '';  
      } else if (this.placeholder !== '') {  
        this.placeholder = '';  
      }  
    });  
  }  
});
1
2
3
4
5
6
7
8
9
10
11
12
13

添加一些额外的输入字段
在表单中添加一些额外的、隐藏的输入字段，可以阻止浏览器自动填充。例如：

html
<input type="text" style="display:none" />  
<input type="password" style="display:none" />
1
2
3

使用 One Time Password (OTP)
使用一次性密码(OTP)代替传统的密码登录方式，可以防止密码被缓存。用户每次登录时都会收到一个新的OTP，这需要使用户的手机或认证器应用程序来生成。

8. 使用 WebAuthn

WebAuthn 是一种利用公钥加密和生物识别技术的现代身份验证标准。通过使用WebAuthn，你可以让用户通过指纹、面部识别或其他生物识别方法来登录，而不是使用密码。这不仅可以防止密码被缓存，而且可以提高安全性。