jQueryでエスケープキーのキーコードを取得して処理する方法【初心者向け】
2024-04-02
jQueryでエスケープキーのキーコード
キーコードは、特定のキーが押されたときに生成される数値です。エスケープキーのキーコードは 27 です。
jQueryでエスケープキーのキーコードを処理するには、次のコードを使用します。
$(document).keydown(function(event) {
if (event.keyCode == 27) {
// エスケープキーが押されたときの処理
}
});
上記のコードは、次のことを行います。
$(document): ドキュメント全体にイベントリスナーを追加します。keydown: キーが押されたときに発生するイベントを処理します。event.keyCode: イベントオブジェクトのkeyCodeプロパティを使用して、押されたキーのキーコードを取得します。ifステートメント : キーコードが 27 の場合、エスケープキーが押されたことを意味します。// エスケープキーが押されたときの処理: エスケープキーが押されたときに実行するコードをここに記述します。
例：
$(document).keydown(function(event) {
if (event.keyCode == 27) {
// モーダルウィンドウを閉じる
$('.modal').hide();
}
});
上記のコードは、エスケープキーが押されたときにモーダルウィンドウを閉じます。
その他のキーコード
以下の表は、一般的なキーとそのキーコードを示しています。
| キー | キーコード |
|---|---|
| Enter | 13 |
| Space | 32 |
| Backspace | 8 |
| Tab | 9 |
注意
- キーコードはブラウザによって異なる場合があります。
- 一部のブラウザでは、
keyCodeプロパティが非推奨になっている場合があります。代わりに、event.whichまたはevent.keyプロパティを使用することをお勧めします。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>エスケープキーでモーダルウィンドウを閉じる</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="modal">
<h1>モーダルウィンドウ</h1>
<p>このモーダルウィンドウを閉じるには、エスケープキーを押してください。</p>
<button class="close-button">閉じる</button>
</div>
<script src="jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 100;
}
.modal .close-button {
position: absolute;
top: 10px;
right: 10px;
padding: 10px;
background-color: #ccc;
border: none;
cursor: pointer;
}
.modal.active {
display: block;
}
$(document).ready(function() {
// モーダルウィンドウを表示
$('.modal').addClass('active');
// エスケープキーが押されたときの処理
$(document).keydown(function(event) {
if (event.keyCode == 27) {
// モーダルウィンドウを閉じる
$('.modal').removeClass('active');
}
});
// 閉じるボタンをクリックしたときの処理
$('.close-button').click(function() {
// モーダルウィンドウを閉じる
$('.modal').removeClass('active');
});
});
このコードを実行すると、次のような動作になります。
- ページが読み込まれると、モーダルウィンドウが表示されます。
- 閉じるボタンをクリックすると、モーダルウィンドウが閉じます。
このサンプルコードを参考に、自分のニーズに合わせてコードを編集してください。
エスケープキー処理の他の方法
$(document).on('keydown', function(event) {
if (event.keyCode == 27) {
// エスケープキーが押されたときの処理
}
});
on() メソッドは、イベントリスナーを追加する汎用的な方法です。上記のコードは、keydown イベントにリスナーを追加し、エスケープキーが押されたときに処理を実行します。
$(document).keypress(function(event) {
if (event.which == 27) {
// エスケープキーが押されたときの処理
}
});
keypress() メソッドは、文字キーが押されたときに発生するイベントを処理します。上記のコードは、エスケープキーのキーコードである 27 をチェックして、エスケープキーが押されたときの処理を実行します。
$(document).keyup(function(event) {
if (event.keyCode == 27) {
// エスケープキーが押されたときの処理
}
});
on()メソッドは、最も汎用的な方法です。keypress()メソッドは、文字キーのみを処理したい場合に便利です。keyup()メソッドは、キーが離されたタイミングで処理を実行したい場合に便利です。
上記以外にも、さまざまな方法でエスケープキーを処理することができます。 詳細については、jQuery のドキュメントを参照してください。
javascript jquery
