JavaScript | テキストエリア（textarea）の入力イベントを実装する方法
テキストエリア（textarea）の入力イベントを実装する方法を紹介しています。
テキストエリア（textarea）の入力イベントを実装する
テキストエリア（textarea）の入力イベントを実装した動作サンプルとサンプルコードになります。
テキストエリアにいずれかのキーが入力・離されたタイミングでイベントを実行してHTML上に出力しています。
See the Pen JavaScript | Textarea Event by yochans (@yochans) on CodePen.
HTMLはイベントの対象とする<textarea>と出力用の<p>タグをひとつ設置しています。
<textarea></textarea>
<p id="output"></p>サンプルではテキストエリアの要素をquerySelector()で取得しています。
イベントはaddEventListene()に「keyup」を指定してテキストエリアの中身を取得し出力エリアに出力する関数を実行しています。
let textarea = document.querySelector(`textarea`);
// いずれかのキーが離された時
textarea.addEventListener('keyup', () => {
document.querySelector(`#output`).innerHTML = textarea.value;
});