JavaScript

テキストの入力チェックをinputEventで作成しよう【JS】

jsのinputeventを使用して入力チェックを実装

input Eventで入力を検知しよう

inputイベントは、テキストエリアやselect要素の値が変更された際に発火します。

changeイベントと似ていますが、inputイベントは、文字を入力するたびに発火します。
分かりやすいように下に例を用意しました。

テキストボックスに入力すると、横に入力した値が表示される簡単な処理です。

■inputイベント

■changeイベント

inputイベントは、入力するたびに文字が表示され、changeイベントはテキストボックスからフォーカスが外れたり、エンターを押さない限りは値が表示されないことが分かると思います。

ソースはこちら

<input type="text" id="js-input">
<p class="js-txt"></p>
//■inputイベント
document.getElementById('js-input').addEventListener('input' , function() {
	const count =document.querySelector('.js-txt');
  count.textContent =this.value;
});

//■changeイベント
document.getElementById('js-input').addEventListener('change' , function() {
	const count =document.querySelector('.js-txt');
  count.textContent =this.value;
});

input Event使用例 テキストボックスの入力チェック

inputイベントが役立つのはやはりテキストボックスやテキストエリアなどの入力系のフォームパーツではないでしょうか？

使用例として、テキストボックスに入力できる文字数を表示する処理を作成しました。
入力するたびに、発火するので入力した値をチェックすることなどに便利です。

■10以内で入力してください！

残り10文字

//inputイベント
document.getElementById('js-string').addEventListener('input', function () {
    
    // 入力した文字列を取得
    const str = this.value;
    
    // 残り文字数を計算して設定
    const count = document.querySelector('.js-string-count span');
    count.textContent = 10 - str.length;
});

まとめ

以上　inputイベントについてでした。
入力チェックなどはvue.jsなどのフレームワークでやるイメージですが、素のJSでもやろうと思えば入力チェックはできそうですね。

changeイベントとの違いを理解して使い分けていきましょう。

-JavaScript
-,