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

Published on with 11,533 views and 8 comments

###场景

我们的登录表单一般都是 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">

这个方案对于某些版本的浏览器可能不行。

###使用假的 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,但是很实用。

参考:Disabling Chrome Autofill

Responses
  • flhuoshan

    看起来low,却很实用

    该评论同步自 黑客派

    Reply
  • mymoshou

    @88250 哦..看来我想的是没错的

    该评论同步自 黑客派

    Reply
  • @mymoshou 用户填的是看得见的 input,隐藏的这个是给浏览器自动填的,因为有的场景我们并不希望浏览器来帮忙自动填充。

    该评论同步自 黑客派

    Reply
  • mymoshou

    弄一个隐藏的input,那客户怎么填呢?是用一个显示的填了,然后用js把内容移过去再提交?

    该评论同步自 黑客派

    Reply
  • 脑洞大开的解决方案

    该评论同步自 黑客派

    Reply
  • ouzhouyou

    插件或者什么都是根据表单的名字来的, onfocus 后才给予表单命名 嘿嘿

    该评论同步自 黑客派

    Reply
  • ouzhouyou

    autocomplete依然不能解决 插件自动填充

    一般我都用onfocus处理

    autocomplete="off" onfocus="this.type='password'"

    该评论同步自 黑客派

    Reply
  • mainlove

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

    原来是这样,我还以为是 name="field1" 名字不要起的重复就行

    该评论同步自 黑客派

    Reply