oninput/JavaScript

oninputの使い方

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

　以下は、例です。

<form>
<input type="text" oninput="alert('テストです');">
</form>

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

　テキスト入力欄で文字を入力すると、アラートが表示されます。

　テキストエリア(textarea)でも同じように動作します。

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

入力文字の反復

　文字が入力される度に反復して表示させる事も出来ます。

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

<form>
<input type="text" id="test-input" oninput="func1();">
</form>
表示欄：<span id="test-span"></span>

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

　以下は、実行例です。

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

サポート

・サポートするブラウザ

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

・サポートするタグ

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

　<input type="text">

　<input type="password">

　<textarea>

「イベントハンドラ一覧」に戻る