cman.jp > WEBページ作成TOP > javascriptサンプル
WEBページ作成
広告
キーボードイベント
キーボード操作によって発生するイベントは、下記４種類あります。
| イベント名 | 発生タイミング |
|---|---|
| onkeydown | いずれかのキーが押されたとき |
| onkeypress | いずれかのキーが押されて放されたとき |
| onkeyup | いずれかのキーが放されたとき |
| oninput | 要素に値が入力されたとき |
【指定可能なタグ】
<a>、
<area>、
<button>、
<input>、
<label>、
<option>、
<select>、
<textarea>など
イベントは、選択可能なタグ（上記）に指定します。それ以外のタグは、指定してもイベントが発生しません。
但し、oninputイベントは、
<input>、
<select>、
<textarea>のみ指定可能です。
広告
キーボードイベントの発生確認
【キー入力でのキーボードイベント確認】
<style type="text/css">
.bg_white { background-color: #ffffff;font-weight: bold;}
.bg_aqua {background-color: #00ffff;font-weight: bold;}
</style>
<script type="text/javascript">
function keydown(evt){
if(document.getElementById("kdown").className=="bg_white"){
document.getElementById("kdown").className="bg_aqua";
}else{
document.getElementById("kdown").className="bg_white"; }
function keypress(evt){
if(document.getElementById("kpress").className=="bg_white"){
document.getElementById("kpress").className="bg_aqua";
}else{
document.getElementById("kpress").className="bg_white"; }
function keyup(evt){
if(document.getElementById("kup").className=="bg_white"){
document.getElementById("kup").className="bg_aqua";
}else{
document.getElementById("kup").className="bg_white"; }
function input(evt){
if(document.getElementById("iput").className=="bg_white"){
document.getElementById("iput").className="bg_aqua";
}else{
document.getElementById("iput").className="bg_white"; }
</script>
<input id="inkey" type="text" name="keytext" maxlength="20" placeholder="入力エリア"
onkeydown="keydown(event)"
onkeypress="keypress(event)"
onkeyup="keyup(event)"
oninput="iput(event)">
<table> <tbody>
<tr><td id="kdown" class="bg_white">onkeydown</td><td id="kpress" class="bg_white">onkeypress</td><td id="kup" class="bg_white">onkeyup</td><td id="iput" class="bg_white">oninput</td></tr>
</tbody> </table>
.bg_white { background-color: #ffffff;font-weight: bold;}
.bg_aqua {background-color: #00ffff;font-weight: bold;}
</style>
<script type="text/javascript">
function keydown(evt){
if(document.getElementById("kdown").className=="bg_white"){
document.getElementById("kdown").className="bg_aqua";
}else{
document.getElementById("kdown").className="bg_white"; }
function keypress(evt){
if(document.getElementById("kpress").className=="bg_white"){
document.getElementById("kpress").className="bg_aqua";
}else{
document.getElementById("kpress").className="bg_white"; }
function keyup(evt){
if(document.getElementById("kup").className=="bg_white"){
document.getElementById("kup").className="bg_aqua";
}else{
document.getElementById("kup").className="bg_white"; }
function input(evt){
if(document.getElementById("iput").className=="bg_white"){
document.getElementById("iput").className="bg_aqua";
}else{
document.getElementById("iput").className="bg_white"; }
</script>
<input id="inkey" type="text" name="keytext" maxlength="20" placeholder="入力エリア"
onkeydown="keydown(event)"
onkeypress="keypress(event)"
onkeyup="keyup(event)"
oninput="iput(event)">
<table> <tbody>
<tr><td id="kdown" class="bg_white">onkeydown</td><td id="kpress" class="bg_white">onkeypress</td><td id="kup" class="bg_white">onkeyup</td><td id="iput" class="bg_white">oninput</td></tr>
</tbody> </table>
下記入力エリアに入力してください。
イベントが発生すると該当イベントの背景色が変わります。
また、発生したイベント名がテキストエリアに発生順に表示されます。
（最大20文字まで入力可能）
イベントが発生すると該当イベントの背景色が変わります。
また、発生したイベント名がテキストエリアに発生順に表示されます。
| イベント処理・表示対象イベント選択 | |
|---|---|
| 全選択／解除 | keydown keypress keyup input |
| onkeydown | onkeypress | onkeyup | input |
注意事項
- 同一の要素に上記全て指定した場合、onkeydown→onkeypress→oninput→onkeyupの順に発生します。
また、ブラウザによって発生しないイベントもあるので、注意が必要です。
広告