如何禁止注册表单的自动填写邮箱、密码,autocomplete="off" 无效

MFC
  • 198

如题,下面这段代码,如果之前在有用户在网站记住了密码,注册的时候这个框会自动填入,有什么办法禁止在“注册”表单中自动填入内容呢?

<form action="" method="post" autocomplete="off"> 添加 autocomplete="off"无效,<input> 添加也无效,Chrome 浏览器里。

我只希望在登录表单能自动输入邮箱和密码:

<form action="" method="post" autocomplete="off">
    <input type="email" name="email">
    <input type="password" name="password">
    <button type="submit">Register</button>
</form>
评论
阅读 33.1k
7 个回答

對,現在許多瀏覽器都會忽略對用戶名密碼的 autocomplete="off"。

autocomplete 本來是瀏覽器私自實現的功能(雖然已幾乎成必備了),所以其行爲也沒有標準規範。

因此,就目前爲止,只要避免瀏覽器將表單識別爲含有用戶名密碼的表單即可。

在 password 之前加一個隱藏的 type="password" 即可。

<form>
    <input name="a" autocomplete="off">
    <input type="password" style="display:none">
    <input type="password" name="b"><button>Sign in</button>
</form>

經測試,此法對 Chrome 和 Safari 有效(Safari 會提示記住密碼,但無法填充,iOS 本來就不會自動填充但手動填充保存的密碼正常)

Firefox 好像本來就不會自動填充(需要手動選擇),所以測試無意義。。。

參見:http://segmentfault.com/q/1010000000663173

之前项目中也遇到过类似的问题,当时查了一段时间后发现貌似不是规范问题,应该是浏览器的特定优化。比如 chrome 里 input 的 name 属性是 username、email 之类的比较敏感的词它会自动尝试填充,后来就换成了其他的一些不太敏感的词。

<input type="text" name="clear" style="position:fixed;bottom:-9999px;">
<input type="password" name="clear" style="position:fixed;bottom:-9999px;">

使用这个方法可以解决问题

刘伍杰
  • 1
新手上路,请多包涵
    <input type="text" id="username" readonly value="请输入账号!" onfocus="userNameFocus()" onblur="userNameBlur()"/>
    <script type="text/javascript">
            function userNameFocus(){
                $("#username").val("");
                //禁止自动填充,如果得到焦点,则删除readonly属性    
                $("#username").removeAttr("readonly");
            }
            function userNameBlur(){
                if($("#username").val()==""){
                    $("#username").val("请输入账号!");
                }
                //禁止自动填充,如果失去焦点,则使文本框只读
                $("#username").attr("readonly", "");
            }
</script>

如果没法使用HTML5或者用了很多办法都不可行,可以试试这个。我自己测试了一下,办法虽笨,但是可以使用。

autocomplete="off" 这东西恐怕不是标准的xhtml元素属性,你可以查查html规范去。
要做到这样,你需要配合一点js让它产生作用,类似这样:
if (document.getElementsByTagName) {
var inputElements = document.getElementsByTagName(“input”);//整个doc的input
for (i=0; inputElements[i]; i++) { //遍历设置属性
if (inputElements[i].className && (inputElements[i].className.indexOf(“disableAutoComplete”)!= -1)) {
inputElements[i].setAttribute(“autocomplete”,”off”);
} } }

我是在修改密码页面遇到类似问题,在Firefox、360极速/兼容模式下已经保存在此域名下的账号会自动填充。解决方法:

在前面加一个 <input type="password"/> 并设置display:none; (为了解决360兼容模式/ie)
然后给显示的所有input(我的场景只有三个input,如果是注册页面可以试试只给type=password的input以及之前的type=text 的input加) 加上autocomplete="new-password" 。自测firefox  360极速/兼容模式下完美解决自动填充问题。
宣传栏