为什么材料组件中的第二个输入文本字段不起作用？答案

【问题标题】：Why does the second input textfield in material component not working?为什么材料组件中的第二个输入文本字段不起作用？
【发布时间】：2020-12-23 14:49:41
【问题描述】：

我在我的网站中使用了材料组件输入。我创建了两个相同的输入。这是我所有的代码：

<link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
<body>
    <div class="information">
        <label class="mdc-text-field mdc-text-field--outlined">
            <span class="mdc-notched-outline">
                <span class="mdc-notched-outline__leading"></span>
                <span class="mdc-notched-outline__notch">
                    <span class="mdc-floating-label" id="first">First</span>
                </span>
                <span class="mdc-notched-outline__trailing"></span>
            </span>
            <input type="text" class="mdc-text-field__input" aria-labelledby="first">
        </label>
    </div>
    <div>
        <label class="mdc-text-field mdc-text-field--outlined">
            <span class="mdc-notched-outline">
                <span class="mdc-notched-outline__leading"></span>
                <span class="mdc-notched-outline__notch">
                    <span class="mdc-floating-label" id="second">Second</span>
                </span>
                <span class="mdc-notched-outline__trailing"></span>
            </span>
            <input type="text" class="mdc-text-field__input" aria-labelledby="second">
        </label>
    </div>

    <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
    <script>
        mdc.textField.MDCTextField.attachTo(document.querySelector('.mdc-text-field'));
    </script>
</body>

但是我的第一个输入工作正常（当我点击时标签移动到顶部）。而第二个似乎没有这样的效果：

什么是问题？谢谢。

【问题讨论】：

标签： angular material-design material-components-web

【解决方案1】：

似乎mdc.textField.MDCTextField.attachTo(document.querySelector('.mdc-text-field'));只适用于一个元素。

所以我修改了代码以进行两个输入以应用脚本，如下所示

<link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
<body>
    <div class="information">
        <label class="mdc-text-field mdc-test1 mdc-text-field--outlined">
            <span class="mdc-notched-outline">
                <span class="mdc-notched-outline__leading"></span>
                <span class="mdc-notched-outline__notch">
                    <span class="mdc-floating-label" id="first">First</span>
                </span>
                <span class="mdc-notched-outline__trailing"></span>
            </span>
            <input type="text" class="mdc-text-field__input" aria-labelledby="first">
        </label>
    </div>
    <div>
        <label class="mdc-text-field mdc-test2 mdc-text-field--outlined">
            <span class="mdc-notched-outline">
                <span class="mdc-notched-outline__leading"></span>
                <span class="mdc-notched-outline__notch">
                    <span class="mdc-floating-label" id="second">Second</span>
                </span>
                <span class="mdc-notched-outline__trailing"></span>
            </span>
            <input type="text" class="mdc-text-field__input" aria-labelledby="second">
        </label>
    </div>

    <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
    <script>
        mdc.textField.MDCTextField.attachTo(document.querySelector('.mdc-test1'));
        mdc.textField.MDCTextField.attachTo(document.querySelector('.mdc-test2'));
    </script>
</body>

【讨论】：

非常感谢！
您也可以使用document.querySelectorAll() 代替document.querySelector()。参见示例here。