web関連

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

2021/06/06

フォームにテキストが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を使って入力後一定時間経ったら処理を実行する方法

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

onchnageプロパティを使ってテキストを自動保存する機能を作ろうと思ったんだけど、onchangeプロパティだとテキストエリアにカーソルが点滅しているような待機状態だと保存されず扱いづらかったので探したらoninputプロパティが見つけた

Leave a Comment

入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。