使用MDL进行Chrome自动填充类型="密码"

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自动填充,因此禁用它不是一个选项.有没有办法改变这个问题？

谢谢 !

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