Material 第二个文本字段标签未移动

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

编译

有什么建议..?

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()...
}

Material 第二个文本字段标签未移动

Material second text field label not moving

html

javascript

material-design