【javascript】フォームにテキストが入力されるたび実行されるoninputプロパティ

フォームにテキストが1文字入力されるたびに実行できるoninputメソッドというのがあったので備忘録

oninputプロパティの使い方

inputタグで使う場合

<input oninput="inputText()" id="text">
<script>
function inputText(){
  let text = document.getElementById('text').value;
  console.log(text);
}
</script>

oninputプロパティに関数を渡す場合

<input id="text">
<script>
let text = document.getElementById('text');
text.oninput = inputText;
function inputText(e){
  console.log(e.target.value);
}
</script>

addEventListenerを使う場合

<input id="text">
<script>
let text = document.getElementById('text');
text.addEventListener('input', inputText);
function inputText(e){
  console.log(e.target.value);
}
</script>

oninputを使って入力後一定時間経ったら処理を実行する方法

テキストを入力するたびに処理を実行するのだと重くなるから、入力がある程度終わったタイミングで特定の処理を実行させる備忘録書いた