Bootstrap 材质浮动标签在自动填充上不起作用答案

【问题标题】：Bootstrap material floating label not working on autofillBootstrap 材质浮动标签在自动填充上不起作用
【发布时间】：2017-06-22 16:34:39
【问题描述】：

我在我的页面上使用bootstrap material kit，但我遇到了一个问题，即在 Chrome 中自动填充时标签没有出现。我四处搜索，发现这是一个已知问题，并尝试使用建议的解决方案here。但它仍然不适合我。不知道怎么解决？

这就是我如何称呼我的样式表：

<link href="/css/material-kit/css/bootstrap.min.css" rel="stylesheet" />
<link href="/css/material-kit/css/material-kit.css" rel="stylesheet"/>
<link href="/css/landing-page.css" rel="stylesheet"/>

HTML：

<div class="form-group label-floating">
    <label class="control-label">Password</label>
    <input type="password" name="password" class="form-control" required/>
    @if ($errors->has('password'))
        <span class="help-block">
            <strong>{{ $errors->first('password') }}</strong>
        </span>
    @endif
</div>

还有脚本：

<!--   Core JS Files   -->
<script src="/js/landing-page/jquery.min.js" type="text/javascript"></script>
<script src="/js/landing-page/bootstrap.min.js" type="text/javascript"></script>
<script src="/js/landing-page/material.min.js"></script>
<script>
    $(document).ready(function() {
            $.material.options.autofill = true;
            $.material.init();
    });
</script>

【问题讨论】：

您链接到的问题表明它应该已在 Material Kit 的 v0.4.1 中修复。你用的是哪个版本？
我正在使用v1.1.0
你能给我们一个现场调试的例子吗？

标签： html css google-chrome autofill bootstrap-material-design

【解决方案1】：

这最终对我有用：

$(window).load($.debounce(200,function(){
    $('input:-webkit-autofill').each(function(){
        if ($(this).val().length !== "") {
            $(this).siblings('label, i').addClass('active');
        }
    });
}));

【讨论】：

【解决方案2】：

我浏览了您提到的bootstrap material kit 的链接，并通过包含添加到creative-tim 的引导材料工具包网站上的相同JS 和css 文件创建了这个示例代码。我相信您的要求是一旦输入成为焦点，就拉起密码标签。

下面是我的代码。我希望它对你有帮助。

<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Bootstrap Material</title>

  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
  <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700" type="text/css">

  <!-- Bootstrap -->
  <link href="http://demos.creative-tim.com/material-kit/assets/css/bootstrap.min.css" rel="stylesheet">

  <!-- Bootstrap Material Design -->
  <link href="http://demos.creative-tim.com/material-kit/assets/css/material-kit.css" rel="stylesheet">


</head>

<body>
  <div class="card">
    <form class="form" method="" action="">
      <div class="content">
        <div class="input-group">
          <span class="input-group-addon">
			 <i class="material-icons">face</i>
		   </span>
          <input type="text" class="form-control" placeholder="First Name...">
        </div>
        <div class="input-group">
          <span class="input-group-addon">
			<i class="material-icons">email</i>
		  </span>
          <input type="text" class="form-control" placeholder="Email...">
        </div>
        <div class="input-group">
          <span class="input-group-addon">
			<i class="material-icons">lock_outline</i>
		  </span>
            <div class="form-group label-floating">
  <label class="control-label">Password</label>
  <input type="password" name="password" class="form-control" required value="37648763"/>

</div>
            <div class="form-group label-floating">
  <label class="control-label">Password</label>
  <input type="password" name="password" class="form-control" required/>

</div>
          
        </div>
      </div>
      <div class="footer text-center">
        <a href="#pablo" class="btn btn-simple btn-primary btn-lg">Get Started</a>
      </div>
    </form>
  </div>
  <script src="http://demos.creative-tim.com/material-kit/assets/js/jquery.min.js"></script>
  <script src="http://demos.creative-tim.com/material-kit/assets/js/material.min.js"></script>
  <script src="http://demos.creative-tim.com/material-kit/assets/js/material-kit.js"></script>
</body>

</html>

【讨论】：

问题不在于输入字段处于焦点时，而在于该字段被chrome自动填充时
当 chrome 在输入密码标签和值重叠时自动填充密码时，我现在得到它。当我们专注于输入并且通过 js 删除“is-empty”类时标签的功能将起作用，这将向上推动标签。您是否也仅在 chrome 或其他浏览器中遇到此问题？如果在 sn-p 或 fiddle 中添加代码，调试会很有帮助。谢谢。
我已经编辑了上面的代码并添加了与您提到的密码相同的 HTML 代码，并为密码分配了一个值，它似乎没有重叠。
有值和浏览器自动填充是不一样的。当我在输入字段中有一个值时，它可以正常工作，是的，但是我需要它在自动填充上工作，当浏览器自动填充密码字段时，它没有拉出上面的标签，这就是问题所在。

【解决方案3】：

如果您不想自动填充，则将 autocomplete 属性赋予输入元素。（注意：autocomplete="off" 不起作用）

<form id="testForm">
    <input type="text"autocomplete="email">
    <input type="password" autocomplete="new-password">
</form>

【讨论】：