クライアントから「Enterキー押したら、検索結果が出るようにして!」と要望があり、難儀したのでメモ代わりに残します。
#キーコードを取得してイベントを発生させる
イベント発火はkeyup
・keydown
・keypress
のいずれかで取得できます。
これをベースにして、Enterキーのコードを取得して、ほにゃららする処理を作成していけます。
$(window).keydown(function (e) {
console.log(e);
// 13:enterKey
if (e.keyCode == 13) {
// ここに処理
alert('Enterキーが押されました');
}
});
#キーコード一覧
参考にさせていただきました。
ShanaBrian Website 押したキーのキーコードを取得
対応キー | キーコード |
---|---|
1 | 49 |
2 | 50 |
3 | 51 |
4 | 52 |
5 | 53 |
6 | 54 |
7 | 55 |
8 | 56 |
9 | 57 |
0 | 48 |
A | 65 |
B | 66 |
C | 67 |
D | 68 |
E | 69 |
F | 70 |
G | 71 |
H | 72 |
I | 73 |
J | 74 |
K | 75 |
L | 76 |
M | 77 |
N | 78 |
O | 79 |
P | 80 |
Q | 81 |
R | 82 |
S | 83 |
T | 84 |
U | 85 |
V | 86 |
W | 87 |
X | 88 |
Y | 89 |
Z | 90 |
- | 173 |
^ | 160 |
\ | 220 |
@ | 64 |
[ | 219 |
] | 221 |
; | 59 |
: | 58 |
, | 188 |
. | 190 |
/ | 191 |
テンキー1 | 97 |
テンキー2 | 98 |
テンキー3 | 99 |
テンキー4 | 100 |
テンキー5 | 101 |
テンキー6 | 102 |
テンキー7 | 103 |
テンキー8 | 104 |
テンキー9 | 105 |
テンキー0 | 96 |
テンキー/ | 111 |
テンキー* | 106 |
テンキー- | 109 |
テンキー+ | 107 |
テンキー. | 110 |
テンキーEnter | 13 |
F1 | 112 |
F2 | 113 |
F3 | 114 |
F4 | 115 |
F5 | 116 |
F6 | 117 |
F7 | 118 |
F8 | 119 |
F9 | 120 |
F10 | 121 |
F11 | 122 |
F12 | 123 |
↑ | 38 |
↓ | 40 |
← | 37 |
→ | 39 |
Enter | 13 |
Shift | 16 |
Ctrl | 17 |
Alt | 18 |
Space | 32 |
BackSpace | 8 |
Esc | 27 |
Tab | 9 |
CapsLock | 20 |
NumLock | 144 |
Insert | 45 |
Delete | 46 |
Home | 36 |
End | 35 |
PageUp | 33 |
PageDown | 34 |
ScrollLock | 145 |
Windows | 91 |
英数 | 240 |
半角/全角 | 243 |
漢字 | 244 |
無変換 | 29 |
変換 | 28 |
カタカナ/ひらがな/ローマ字 | 242 |