浏览器不关心自动完成=关闭自动，甚至填充凭据到错误的文本字段?

我通过将密码字段设置为只读并激活它来修复它，当用户单击进入它或使用tab键到该字段时。

修复浏览器自动填充:只读和设置可写的焦点(在鼠标点击和标签通过字段)

 <input type="password" readonly  
     onfocus="$(this).removeAttr('readonly');"/>

更新: Mobile Safari在字段中设置光标，但不显示虚拟键盘。新的修复工作像以前一样，但处理虚拟键盘:

<input id="email" readonly type="email" onfocus="if (this.hasAttribute('readonly')) {
    this.removeAttribute('readonly');
    // fix for mobile safari to show virtual keyboard
    this.blur();    this.focus();  }" />

现场演示https://jsfiddle.net/danielsuess/n0scguv6/

/ / UpdateEnd

顺便说一下，更多关于我观察到的信息:

Sometimes I notice this strange behavior on Chrome and Safari, when there are password fields in the same form. I guess, the browser looks for a password field to insert your saved credentials. Then it autofills username into the nearest textlike-input field , that appears prior the password field in DOM (just guessing due to observation). As the browser is the last instance and you can not control it, sometimes even autocomplete=off would not prevent to fill in credentials into wrong fields, but not user or nickname field.

在Chrome 48+使用这个解决方案:

Put fake fields before real fields: <form autocomplete="off"> <input name="fake_email" class="visually-hidden" type="text"> <input name="fake_password" class="visually-hidden" type="password"> <input autocomplete="off" name="email" type="text"> <input autocomplete="off" name="password" type="password"> </form> Hide fake fields: .visually-hidden { margin: -1px; padding: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip: rect(0, 0, 0, 0); position: absolute; } You did it!

同样，这也适用于旧版本。

我不得不在drupal页面上用一个巨大的webform来解决这个问题。因为我不能编辑每个输入的html代码，所以我想出了下面的通用jQuery解决方案。

<script>

    // Form Autocomplete FIX
    function is_mobile() {
        if( screen.width < 500 || navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i) ) {
            return true;
        }
        return false;
    }
    jQuery( 'input[autocomplete="off"]' ).each( function() {
        if( is_mobile() ) {
            return;
        }
        jQuery( this ).attr( 'readonly', true );
    } );
    jQuery( 'input[autocomplete="off"]' ).focus( function() {
        if( is_mobile() ) {
            return;
        }
        jQuery( this ).removeAttr( 'readonly' );
        jQuery( this ).focus();
    } );
    jQuery( 'input[autocomplete="off"]' ).blur( function() {
        if( is_mobile() ) {
            return;
        }
        jQuery( this ).attr( 'readonly', true );
    } );

</script>

浏览器检测从这里开始。

我想有可能优化这段代码(我很想获得一些建议)，但您将从中获得想法。

似乎Chrome现在忽略autocomplete="off"，除非它是在<form autocomplete="off">标签。

我用另一种方法解决了。你可以试试这个。

<input id="passfld" type="text" autocomplete="off" />
<script type="text/javascript">
// Using jQuery
$(function(){                                               
    setTimeout(function(){
        $("input#passfld").attr("type","password");
    },10);
});


// or in pure javascript
 window.onload=function(){                                              
    setTimeout(function(){  
        document.getElementById('passfld').type = 'password';
    },10);
  }   
</script>

对任何想要解决这个问题的人来说，我终于明白了。

Chrome只服从的自动完成="off"如果页面是HTML5页面(我使用XHTML)。

我把我的页面转换成HTML5，问题就消失了(捂脸)。