输入框禁止自动填充浏览器记住的密码

1,834 阅读1分钟

禁止的原因:

  • 自动回填会产生一个背景,比较丑陋。(也可以通过修改样式解决)
  • 填充位置错乱。(如 密码上面不是用户名的情况)

填充的匹配规则:

浏览器保存密码是根据 input="password" 来判断的

解决办法: 方法一:

<input type="password" name="pwd" placeholder="请输入密码" autocomplete="off" />

方法二:

<input type='text' onblur="this.type= 'text'" onfocus="this.type = 'password'" />

方法三:

<input readonly onfocus="this.removeAttribute('readonly')" onblur="this.setAttribute('readonly', true)"

antd-vue组件中:

<a-input-password
    readonly
    onfocus="this.removeAttribute('readonly')"
    onblur="this.setAttribute('readonly', true)"
  ></a-input-password>