Menu

HTML タグ textarea に入力された文字をリアルタイムに反映する場合は keyup イベントを利用する

2024年01月14日

HTML タグの textarea に入力された文字をリアルタイムに取得したい場合があります。

textarea に入力された文字（変更内容）は Javascript の addEventListener change ( onchange ) イベントで取得することができますが、change イベントはリアルタイムの反映に不向きです。

では何を使うかというと、keyup イベントです。

addEventListener の change イベントと keyup イベントをそれぞれ以下のように用意し、挙動の違いを確認します。

まずは change イベント。

<textarea id="myTextareaChange"></textarea>
<div id="resultChange"></div>
const myTextareaChange = document.getElementById("myTextareaChange");
const resultChange = document.getElementById("resultChange");
myTextareaChange.addEventListener("change", (e) => {
  resultChange.innerHTML = e.target.value;
});

続いて keyup イベント。

<textarea id="myTextareaKeyup"></textarea>
<div id="resultKeyup"></div>
const myTextareaKeyup = document.getElementById("myTextareaKeyup");
const resultKeyup = document.getElementById("resultKeyup");
myTextareaKeyup.addEventListener("keyup", (e) => {
  resultKeyup.innerHTML = e.target.value;
});

この２つを実行した結果が以下です。

↓ change イベント

↓ keyup イベント

change イベントと keyup イベントにそれぞれ文字を入力してみると、change イベントはフォーカスを外した時（文字を入力する textarea 外を押下した時）に変更内容が反映されるのに対して、keyup イベントは文字を入力し終えた後に変更内容が反映されていることがわかります。

以上の結果を見て、textarea の文字をリアルタイムに反映したい場合は Javascript の addEventListener keyup イベントがひとつの検討材料になるかと思います。

広告