Chrome 使用 MDL 自动填充类型="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 中（Link 这里：https://www.getmdl.io/components/index.html#textfields-section）没有密码类型，所以我总是遇到以前的问题。

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

谢谢！

Answer 1

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

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

Answer 2

不好，不干净，但可以用。此解决方案依赖于 ids

$(document).ready( function() {

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

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

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

Answer 3

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 类型不是 "password"

时有效的解决方案

  $.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 4

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

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

Chrome 使用 MDL 自动填充类型="password"

Chrome autofill with MDL for type="password"

html

css

google-chrome

material-design

material-design-lite