Material Design 组件文本字段的标签不浮动到左上角答案

【问题标题】：Material Design Component Text Field's Label Does Not Float To Top LeftMaterial Design 组件文本字段的标签不浮动到左上角
【发布时间】：2018-12-06 20:05:27
【问题描述】：

我正在关注材料设计教程here。本教程遵循 Node JS 方法并使用 npm 安装材料设计组件。这很好，我让 MDC 101 项目完全按照教程中的方式运行。一旦我开始输入文本，文本框标签就会很好地浮动到左上角，如页面底部here 所示。

但是，我想在我的 Scala Play 网络服务中使用 Material Design 组件，因此我将 CSS 链接和 JS 脚本插入到我的网页（代码如下）中，如here. 所述，我的页面的 HTML 如下所示：

<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Shrine (MDC Web Example App)</title>
    <link rel="shortcut icon" href="https://material.io/favicon.ico">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
    <link rel="stylesheet" href="https://unpkg.com/material-components-web/dist/material-components-web.min.css">
</head>
<body>

<form action="home.html">
    <div class="mdc-text-field mdc-text-field--box username">
        <input type="text" class="mdc-text-field__input" id="username-input" name="username" required>
        <label class="mdc-floating-label" for="username-input">Username</label>
        <div class="mdc-line-ripple"></div>
    </div>
    <div class="mdc-text-field mdc-text-field--box password">
        <input type="password" class="mdc-text-field__input" id="password-input" name="password" required minlength="8">
        <label class="mdc-floating-label" for="password-input">Password</label>
        <div class="mdc-line-ripple"></div>
    </div>
    <div class="button-container">
        <button type="button" class="mdc-button cancel">
            Cancel
        </button>
        <button class="mdc-button mdc-button--raised next">
            Next
        </button>
    </div>
</form>

<script src="https://unpkg.com/material-components-web/dist/material-components-web.min.js"></script>

</body>
</html>

如果您在浏览器中渲染它，可以看到在显示 MDC 文本字段时，标签不会像在 Node.js 下运行的教程示例中那样浮动。

我在这里缺少什么？我怀疑这与某些 Javascript 未激活有关（此处为 Javascript noob）

【问题讨论】：

标签： javascript html css material-design material-components-web

【解决方案1】：

您需要实例化 MDC 文本字段组件。一种快速而肮脏的方法是使用以下 JavaScript 将脚本标记添加到您的 html。

<script>
  mdc.textField.MDCTextField.attachTo(document.querySelector('.mdc-text-field'));
</script>

【讨论】：

我也在这里偶然发现了它，但不知道如何编写 JS：github.com/material-components/material-components-web/blob/…
耶！谢谢@benvc
@benvc，另外，在我的情况下，此解决方案仅适用于单个元素。我有一个登录表单，其中包含 2 个概述的文本字段，一个用于电子邮件，另一个用于密码，但是当我添加上面的 javascript 时，只有第一个电子邮件字段使它的标签浮动，而不是第二个。在我键入时，密码字段的标签仍然卡在里面。有什么理由吗？我的想法是 .mdc-text-field 是一个类，它应该适用于所有拥有它的领域
@CliffTheCoder - 请参阅以下问题并注意使用 querySelectorAll 和 forEach 来实例化多个 MDC 组件 - stackoverflow.com/questions/45152789/…
我知道了@benvc。再次感谢，它成功了

【解决方案2】：

对于跟随官方getting started guide安装MDC和webpack的未来访问者，对我有用的只是在捆绑的JS文件中添加初始化TextField（如docs中所述）：

import {MDCTextField} from '@material/textfield';

const textField = new MDCTextField(document.querySelector('.mdc-text-field'));

【讨论】：

【解决方案3】：

这个 Jquery 是一个糟糕的组合，我并不引以为豪，但它确实有效并且不需要 import 语句。

<script type="text/javascript">
 $(document).ready(function() { 
   $("#user-input").val("Player One");
   $("label[for='user-input']").addClass("mdc-floating-label--float-above");
   $("#user-input").focus();
   $("#user-input").blur();
 });
</script>

它设置值，添加使标签浮动所需的类，然后快速添加和删除文本字段的焦点，这会触发MDC中的轮廓代码去除轮廓缺口。

【讨论】：