如何解决为什么材料组件中的第二个输入文本字段不起作用？
我在我的网站中使用了材料组件输入。我创建了两个相同的输入。这是我所有的代码：
<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>
但只是我的第一个输入正常工作（当我点击时标签移动到顶部）。第二个似乎没有这样的效果：
什么问题？谢谢。
解决方法
似乎 mdc.textField.MDCTextField.attachTo(document.querySelector('.mdc-text-field')); 只适用于一个 elament。
所以我修改了代码以制作两个输入来应用脚本，如下所示
<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>版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
