Chrome 使用 MDL 自动填充 type="password"

Question

我目前正在使用来自 google 的 MDL（Material Design Lite）在我的网站上工作，但我遇到了一个小问题。

如你所见，星星在好地方，但密码留在这里（他在任何点击或按下键盘后都会移动）

我的代码很简单：

<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
    <input class="mdl-textfield__input" type="text" name="mail">
    <label class="mdl-textfield__label">Adresse Email</label>
</div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
    <input id="test" class="mdl-textfield__input" type="password" name="password">
    <label class="mdl-textfield__label">Password</label>
</div>

代码是普通的和基本的。问题是，在 MDL（此处链接：https://www.getmdl.io/components/index.html#textfields-section）中没有密码类型，所以我总是遇到以前的问题。

我想为我的客户保留 chrome 自动填充功能，因此禁用它不是一个选项。有什么办法可以改变这个问题吗？

谢谢！

Answer 1

setTimeout(function() {
  $.each($('.mdl-textfield'), function() {
    var input = $(this).find("input");
    var len = input.val().length;
    var type = input.attr("type");

    if (len > 0 || type == "password")
      $(this).addClass("is-dirty");
  });
}, 100);

适用于文本和密码字段。一个缺点是密码字段将始终被标记为脏、空或不。

Answer 2

HTML

<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
  <input class="mdl-textfield__input" type="password" id="password" required name="password">
  <label class="mdl-textfield__label" for="password"></label>
</div>

CSS 修复

.mdl-textfield--floating-label input[type=password]:-webkit-autofill ~ label {
  transform: translate3d(0, -20px, 0);
  visibility: hidden;
}

.mdl-textfield--floating-label input[type=password]:-webkit-autofill ~ label:after {
  content: 'Password';
  visibility: visible;
  left: 0;
  transform: translate3d(0, -20px, 0);
  background: transparent;
  color: inherit;
}

根据您的需要更改颜色和像素偏移量

---

类型不是“密码”时有效的JQuery解决方案

  $.each($('.mdl-textfield__input'), function() {
    $(this).parent().get(0).MaterialTextfield.checkDirty();
  });

---

如果检测到自动填充，另一个 jquery 解决方法是强制将焦点放在输入字段上。你应该把它放在 $(document).ready 中

  setTimeout(function() {
    try { if ( $('#password:-webkit-autofill').length > 0 ) $('#password').focus(); }
    catch (error) { console.log(error); }
  }, 25);

Answer 3

它不好，它不干净，但它有效。此解决方案依赖于 ids

$(document).ready( function() {

    setTimeout(function(){
        $("#password").focus();
        componentHandler.upgradeDom();

        if($("#username").val().length === 0) { 
            $("#password").blur(); 
            componentHandler.upgradeDom();
        }
    },100);
});

如果您尝试检查密码的长度，它总是会给出 0，因此您可以检查用户名字段的长度（如果它已满，即使没有密码，光标也很高兴）。

Answer 4

在标签中使用for='id'？

<label class="mdl-textfield__label" for='test'>Password</label>