input/JavaScript

イベントリスナーのinputについて説明します。

inputの使い方

 inputは、テキスト入力欄等で文字が入力された時に処理を実行出来ます。

 以下は、例です。

【input利用例】
<form>
<input type="text" id="test-input1">
</form>

<script>
var x1 = document.getElementById("test-input1");
x1.addEventListener("input", function(){alert("テストです");}, false);
</script>

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

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

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

 尚、表示の変更があった時をイベントとするため、AltやShiftキー等ではイベントとなりません。BS(バックスペース)はイベントになります。

入力文字の反復表示

 イベントリスナーのinputを利用して、文字が入力される度に反復して表示させる事も出来ます。

【入力文字の反復例】
<form>
<input type="text" id="test-input2">
</form>
表示欄:<span id="test-span"></span>

<script>
function func1() {
    var y = document.getElementById("test-span");
    y.innerHTML = x2.value;
}

var x2 = document.getElementById("test-input2");
x2.addEventListener("input", func1, false);
</script>

 赤字部分で、test-input2の値をtest-spanの文字を示すプロパティに代入しています。このため、inputにより文字が入力される度にfunc1関数が呼び出され、test-spanはtest-input2の値に書き換えられます。

 以下は、実行例です。

表示欄:

 文字を入力する度に「表示欄」の右に反復表示されます。

サポート

・サポートするブラウザ

 以下は、最新バージョンでのサポート状況を示していますが、Internet ExplorerはOSによって使えるバージョンが異なるため、使えるバージョンを示しています。WindowsXPで使えるInternet Explorer8以降、全てのバージョンで使える場合は〇とします。

【サポートするブラウザ】
機種 ブラウザ サポート
パソコン Chrome
Safari
Firefox
Microsoft Edge
Internet Explorer v9以上
スマートフォン Chrome
Safari
Firefox

・サポートするタグ

 サポートするタグの一例は、以下の通りです。

 <input type="text">

 <input type="password">

 <textarea>

  • このエントリーをはてなブックマークに追加