0

私は自分のウェブサイトでマテリアル コンポーネントの入力を使用しました。2 つの同じ入力を作成します。ここにすべての私のコードがあります:

<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>

しかし、最初の入力だけが適切に機能しています (クリックするとラベルが一番上に移動します)。そして、2番目はそのような同じ効果を持っていないようでした:

私の結果

問題は何ですか？ありがとう。

4

1 に答える 1