Блог

У меня возникли проблемы с анимацией надписи на моем втором текстовом поле, которое не перемещается, когда фокус,

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">amp;#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">amp;#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;
 

Материал 10.0 и скомпилирован с помощью webpack 5.24.3

Есть предложения ..?

Это работает только для первого элемента.

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