html – 使用MDL for Chrome =“password”的Chrome自动填充

概述我目前正在使用谷歌的MDL(Material Design Lite)在我的网站上工作,我有一点问题. 正如你所看到的,星星在好地方,但密码留在这里(他在点击或按键盘后移动) 我的代码非常简单： <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> <input class="mdl-textf 我目前正在使用谷歌的MDL(Material Design lite)在我的网站上工作,我有一点问题.

正如你所看到的,星星在好地方,但密码留在这里(他在点击或按键盘后移动)

我的代码非常简单：

<div >    <input  type="text" name="mail">    <label >Adresse Email</label></div><div >    <input ID="test"  type="password" name="password">    <label >Password</label></div>

代码是通常的和基本的.问题是,在MDL(link here：https://www.getmdl.io/components/index.html#textfields-section)中没有密码类型,所以我总是遇到问题.

我想为我的客户端保留Chrome自动填充,因此禁用它不是一个选项.有没有办法改变这个问题？

谢谢 ！

解决方法 HTML

<div >  <input  type="password" ID="password" required name="password">  <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,0);  background: transparent;  color: inherit;}

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

类型不是“密码”的J@R_502_5962@解决方案

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

另一个j@R_502_5962@解决方法是在检测到自动填充时强制关注输入字段.你应该把它放在$(document).ready中

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

总结

以上是内存溢出为你收集整理的html – 使用MDL for Chrome =“password”的Chrome自动填充全部内容，希望文章能够帮你解决html – 使用MDL for Chrome =“password”的Chrome自动填充所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。