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

Question

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

在 <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>

Answer 1

可以参考网易的登录表单,添加autocomplete="new-password"属性，我没有试过，但同事说可以。

另外，也可以参考这个:http://stackoverflow.com/ques...

Answer 2

對，現在許多瀏覽器都會忽略對用戶名密碼的 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

Answer 3

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

Answer 4

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

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

Answer 5

    <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或者用了很多办法都不可行，可以试试这个。我自己测试了一下，办法虽笨，但是可以使用。

Answer 6

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”);
} } }

Answer 7

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

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