onkeyup

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

onkeyupの基本的な使い方

イベントハンドラのonkeyupは、要素内でキーボードのキーを離した時に処理を実行できます。

以下は、利用例です。

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

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

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

テキスト入力欄でキーを離すと、アラートが表示されます。なお、日本語入力、Shift、Alt、Ctrl、BSキーなどでもイベントが発生します。

テキストエリアでの利用例

onkeyupは、テキストエリアでも使えます。

【テキストエリアでの利用例】
<textarea id="test-keyup"></textarea>

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

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

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

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

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

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

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

ブラウザのサポート状況

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

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

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