javascript - 材料第二个文本字段标签不移动

Question

我的第二个文本字段上的标签动画在焦点不移动时遇到问题，

HTML：

        <div class="mdc-text-field mdc-text-field--outlined">
            <div class="mdc-notched-outline">
                <div class="mdc-notched-outline__leading"></div>
                <div class="mdc-notched-outline__notch">
                    <label class="mdc-floating-label">Pre-Tax Income</label>
                </div>
                <div class="mdc-notched-outline__trailing"></div>
            </div>
            <div class="mdc-text-field__affix mdc-text-field__affix--prefix">&#163;</div>
            <input type="number" class="mdc-text-field__input" id="income" required>
        </div>

        <br /><br />

        <div class="mdc-text-field mdc-text-field--outlined">
            <div class="mdc-notched-outline">
                <div class="mdc-notched-outline__leading"></div>
                <div class="mdc-notched-outline__notch">
                    <label class="mdc-floating-label">Deductions (e.g. Pension)</label>
                </div>
                <div class="mdc-notched-outline__trailing"></div>
            </div>
            <div class="mdc-text-field__affix mdc-text-field__affix--prefix">&#163;</div>
            <input type="number" class="mdc-text-field__input" id="deductions">
        </div>

JS：

import { MDCTextField } from '@material/textfield';
const textField = new MDCTextField(document.querySelector('.mdc-text-field'));

SCSS：

@use "@material/floating-label/mdc-floating-label";
@use "@material/line-ripple/mdc-line-ripple";
@use "@material/notched-outline/mdc-notched-outline";
@use "@material/textfield";

@include textfield.core-styles;

Material 10.0 并使用 webpack 5.24.3 编译

有什么建议么..？

标签： javascripthtmlmaterial-design

Answer 1

这仅适用于第一个元素。

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

请试试 ：

let mdcFields = document.getElementsByClassName('mdc-text-field');

for(let field of mdcFields) {

 let textField = new MDCTextField(field);

 textField.callMethods()...
}