禁止浏览器自动填充表单字段

我们的登录表单一般都是 input text + input password:

<form id="loginForm">
  <input type="text" name="username">
  <input type="password" name="password">
  <button type="submit">
    登录
  </button>
</form>

登录后如果用户选择了保存登录密码,那后续界面中如果有形如:

<input type="text" name="field1">
<input type="password" name="field2">

这样的两个 input(text+password)接在一起,那浏览器就会自动填充登录时的输入。

要用程序清空自动填充有两个方案:

使用 autocomplete 属性

在不需要自动填充的 input 上设置 autocomplete 属性:

<input autocomplete="off">

这个方案对于 FireFox 和一些老版本的 Chrome 是可以的,但在较新的 Chrome 中不行。

使用假的 input 让浏览器去填充

在页面 <body> 后加入:

<!-- fake fields are a workaround for chrome autofill getting the wrong
fields -->
<input style="display:none" type="text" name="fakeusernameremembered"/>
<input style="display:none" type="password" name="fakepasswordremembered"/>

这个方案原理是让浏览器去填充用户实际上看不到的 input。虽然看上去代码比较 low,但是很实用。


原文链接:,转发请注明来源!
「禁止浏览器自动填充表单字段 」评论列表

发表评论