密码输入字段长度 = 0 自动填充（android chrome）

Question

我正在登录页面上的输入字段上运行占位符。在 android (4.3) 上，它会在页面加载时自动填充用户和密码字段。使用 Javascript，我可以获得自动填充的用户输入的长度，但是当我在密码输入上运行相同的函数时，它返回 0。

即使当我使用 Chrome 远程调试进行调试时，它也显示密码输入字段是“”，长度 = 0。但 android chrome 在该字段中显示密码。

反正有这个。我只需要检测输入字段何时不为空，以便隐藏占位符。

$(document).ready(function(){
    setTimeout(function () {
        alert($("#password").val().length);
        checkPlaceholder("#password");
    }, 1000);
});

function checkPlaceholder(x) {
    if($(x).val().length === 0){
        $(x).parent().find(".input_placeholder").removeClass("placeholder_hide");
    }
    else {
        $(x).parent().find(".input_placeholder").addClass("placeholder_hide");
    }
}   

Answer 1

嗯，我有类似的问题。我没有找到任何有关此的信息。但我注意到，在用户点击文档正文后，Android Chrome 会用真实值填充密码字段。在该密码字段生成'change' 事件之后，如果您检查它的值，它将被填充。不幸的是，如果我们触发 'click'/'touch'/'focus' etc. 事件，Chrome 不会以同样的方式工作，只有硬件点击。

所以，我通过在密码字段上添加 'change' 事件的事件侦听器解决了我的问题。对你来说，解决方案可能是这样的：

$(document).ready(function() {
    // leave this code for other browsers
    setTimeout(function () {
        alert($("#password").val().length);
        checkPlaceholder("#password");
    }, 1000);
    // android Chrome fix
    $('#password').change(checkPlaceholder.bind(null, '#password'));
});

但是，正如我之前写的，该代码将在用户点击页面后仅执行。