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版です。
「イベントハンドラ一覧」に戻る