WePuri
ワードプレス教室

WePuri
ワードプレス教室

MENU
[bogo]

フォームに入力された値をリアルタイムでブラウザに反映させる

サンプルコード

<input type="text" id="input">
<div id="text_box"></div>

<script>
    // input要素を取得
    const $input = document.getElementById("input");
    // text_box要素を取得
    const $text_box = document.getElementById('text_box');

    // 「input」に入力された時、valueに入力内容を付与する
    $input.addEventListener("input", function () {
        $text_box.textContent = this.value;
    });
</script>