oninput

イベントハンドラのoninputについて、サンプルコードを示しながら使い方を説明しています。

oninputの基本的な使い方

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

以下は、利用例です。

【oninput利用例】
<input type="text" id="test-input">

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

赤字部分は、1行目で指定したIDをxにオブジェクトで登録しています。また、2行目は無名関数で直接alertを記述していますが、func1などと関数を呼び出すこともできます。

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

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

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

入力文字の反復表示

ベントハンドラのoninputを利用して、文字が入力されるたびに反復して表示させることもできます。

【入力文字の反復】
<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.oninput = 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.oninput = func1;
</script>

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

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

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

HTMLの属性として記述する(非推奨)

oninputは、HTMLの属性としても記述できます。

【oninputをHTML属性で記述する例】
<input type="text" oninput="alert('テストです');">

inputタグで、oninput属性によってalertを実行しています。これでも、同じ動作をします。

属性で記述する方法は、以前は多く使われていましたが、今では非推奨になっています。新しくスクリプトを作る時は、これまで説明したプロパティ(x.oninputなど)で記述するか、イベントリスナーを使って記述がお薦めです。

ブラウザのサポート状況

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

【パソコン】
項目 IE Ed Fx Ch Sa Op
oninput
【スマートフォン】
項目 Sa An Op Ch Fx Sm
oninput
サポート
制限あり
×
未サポート
不明
IE
Internet Explorer
Ed
Edge
Fx
Firefox
Ch
Chrome
Sa
Safari
Op
Opera
An
Android Browser
Sm
Samsung Internet

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