Question

我正在遵循《材料设计指南》 here。本教程采用Node JS方法，并使用npm安装材料设计组件。很好，我得到的MDC 101项目的运行与教程中的完全相同。一旦我开始输入here页面底部所示的文本，文本框标签就会很好地浮动到左上方。

但是，我想在Scala Play Web服务中使用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下运行的教程示例中那样浮动。

我在这里想念什么？我怀疑这与某些Javascript未激活有关（此处是Java Noob）

Answer 1

您需要实例化MDC javascript。一种快速的方法是在html主体的末尾添加第二个脚本标签，并在其中添加一行以实例化mdc-text-field。

n=2

Answer 2

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

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

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

Answer 3

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

<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中的大纲代码移除大纲缺口。

物料设计组件文本字段的标签不浮动到左上方

3 个答案: