使用MDL进行Chrome自动填充，类型为＆＃34;密码＆＃34;

Question

我目前正在使用谷歌的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自动填充，因此禁用它不是一个选项。有没有办法改变这个问题？

感谢＆＃39; s！

Answer 1

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

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

当类型不是“密码”时可以使用的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 2

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 3

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

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

Answer 4

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

$(document).ready( function() {

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

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

如果您尝试检查密码的长度，它总是会给0，所以您可以检查用户名字段的长度（如果它已满，那么将光标放在那里即使有＆＃也很高兴＃ 39;没有密码）。