Material 设计组件文本字段的标签不会浮动到左上角

Question

我正在学习 Material 设计教程 here. The tutorial follows a Node JS approach and makes use of npm to install the material design components. This is fine and I get the MDC 101 project running exactly as in the tutorial. The text box label floats nicely to the top left as soon as I start entering in the text as shown at the bottom of the page here。

但是，我想在我的 Scala Play 网络服务中使用 Material 设计组件，因此我将 CSS link 和 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 下的教程示例运行那样浮动。

我在这里错过了什么？我怀疑这与一些 Javascript 没有被激活有关（Javascript noob here）

Answer 1

您需要实例化 MDC 文本字段组件。一种快速而肮脏的方法是使用以下 JavaScript.

将脚本标记添加到您的 html

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

Answer 2

关注官方 getting started guide to install MDC with webpack, what worked for me is simply to add initialize the TextField in the JS file bundled (as mentioned in the docs 的未来访客）：

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

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

Answer 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>

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

Material 设计组件文本字段的标签不会浮动到左上角

Material Design Component Text Field's Label Does Not Float To Top Left

html

javascript

css

material-design

material-components-web