input

inputの基本的な使い方

イベントリスナーのinputは、テキスト入力欄などで文字が変更された時に処理を実行できます。

以下は、利用例です。

<input type="text" id="test-input">

<script>
const x = document.querySelector("#test-input");
x.addEventListener("input", function(){alert("テストです");});
</script>

赤字部分でinputイベントを登録しています。無名関数で直接alertを記述していますが、func1などと関数を呼び出すこともできます。

実行例は、以下のとおりです。

テキスト入力欄で文字を入力すると、アラートが表示されます。テキストエリア(textarea)でも同じように動作します。

なお、表示の変更があった時をイベントとするため、AltやShiftキーなどではイベントとなりません。BS(バックスペース)はイベントになります。また、マウスでコピー&ペーストしてもイベントになります。

入力文字の反復表示

ベントリスナーのinputを利用して、文字が入力されるたびに反復して表示させることもできます。

<input type="text" id="test-input">
表示欄：<span id="test-span"></span>

<script>
function func1() {
  const y = document.querySelector("#test-span");
  y.textContent = x.value;
}

const x = document.querySelector("#test-input");
x.addEventListener("input", func1);
</script>

赤字部分で、テキスト入力欄の値をspan要素のコンテンツとして代入しています。このため、文字が入力されるたびにinputイベントでfunc1関数が呼び出され、span要素はテキスト入力欄の値に書き換えられます。

実行例は、以下のとおりです。

文字を入力するたびに、「表示欄」の右に反復表示されます。なお、入力できる文字数を5文字までに制限しています。

入力文字をチェックする

入力途中でリアルタイムにチェックして、英字以外が入力できないようにもできます。

<input type="text" id="test1">

<script>
function func1() {
  x.value = x.value.replace(/[^a-z]+/ig,"");
}
const x = document.querySelector("#test1");
x.addEventListener("input", func1);
</script>

input要素で入力があるたびに、英字かを正規表現でチェックして、英字でなければ""で入力値を消しています。

実行例は、以下のとおりです。

英字以外は、入力できないと思います。また、コピー&ペーストしても、英字以外は消されてしまうと思います。

ブラウザのサポート状況

各ブラウザの最新バージョンでのサポート状況は、以下のとおりです。

〇

サポート

△

制限あり

×

未サポート

？

不明

IE

Internet Explorer

Ed

Edge

Fx

Firefox

Ch

Chrome

Sa

Safari

Op

Opera

An

Android Browser

Sm

Samsung Internet

※スマートフォンのFirefoxとChromeは、Android版です。