テキストボックスへのいろんなイベント

テキストボックスに使用できるイベントをまとめてみました。

<textarea id="textarea">Lorem ipsum dolor sit amet</textarea>

let textarea = document.getElementById('textarea');

textarea.addEventListener('copy', () => {
  console.log('こぴーしました');
});
textarea.addEventListener('cut', () => {
  console.log('カットしました');
});
textarea.addEventListener('paste', () => {
  console.log('ペーストしました');
});
textarea.addEventListener('change', () => {
  console.log('フォーカスが外れました');
});
textarea.addEventListener('keypress', () => {
  console.log('入力しました');
});
textarea.addEventListener('keyup', () => {
  console.log('キーが押されました');
});

copy、cut、pasteイベントはコマンドのコピー、カット、ペーストを使用することで検知できます。
changeイベントはテキストボックスからフォーカスが外れることで検知します。
keypressは半角英数ととEnterが押された時に検知します。
keyupはすべてのキーボード操作に対して反応します。コマンド操作なども反映するので、ちょっと扱いにくい。

参考