Fatal编程技术网
  • javascript/
  • Javascript 材料设计组件文本字段'；s标签不会浮动到左上角

Javascript 材料设计组件文本字段'；s标签不会浮动到左上角

javascript html css

Javascript 材料设计组件文本字段'；s标签不会浮动到左上角,javascript,html,css,material-design,material-components-web,Javascript,Html,Css,Material Design,Material Components Web,我正在学习材料设计教程。本教程遵循Node JS方法，并使用npm安装材质设计组件。这很好，我让MDC101项目完全按照教程中的方式运行。一旦我开始输入文本，文本框标签就会很好地浮动到左上角，如页面底部所示 但是，我想在Scala Play web服务中使用Material Design组件，因此我将CSS链接和JS脚本插入到我的网页（代码如下）中，如下所述。我的网页的HTML如下所示： <!DOCTYPE html> <html lang="en"> <head&

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

但是，我想在Scala Play web服务中使用Material Design组件，因此我将CSS链接和JS脚本插入到我的网页（代码如下）中，如下所述。我的网页的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 Web示例应用程序）
用户名
密码
取消
下一个
如果在浏览器中渲染，可以看到，在显示MDC文本字段的同时，标签不会像在节点下运行的教程示例中那样浮动

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

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

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


mdc.textField.MDCTextField.attachTo（document.querySelector（'.mdc text field'））；
对于跟随官方安装带有
webpack
的
MDC
的未来访问者，对我来说最有效的方法就是在绑定的JS文件中添加初始化文本字段（如中所述）：

从'@material/textfield'导入{MDCTextField}；
const textField=new MDCTextField（document.querySelector（'.mdc text field'）；
这个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>


$（文档）.ready（函数（）{
$（“#用户输入”）.val（“玩家一号”）；
$（“label[for='user-input']”）addClass（“mdc浮动标签——浮动在上面”）；
$（“#用户输入”）.focus（）；
$（“#用户输入”）.blur（）；
});
它设置值，添加使标签浮动所需的类，然后快速向文本字段添加和删除焦点，从而触发MDC中的大纲代码以删除大纲缺口。

我在这里也偶然发现了它，但不确定如何编写JS：