JavaScriptのキーイベントのe.keyCode𞓜e.which 124; e.charCodeを浅く話す.

1、ブラウザのボタンイベント
ブラウザには3つのキーイベントがあります.keydown、keyshes、keyupの3つのイベントにそれぞれ対応します.
典型的なボタンは、この三つのイベントのうち、順番にkeydown-->keyphres-->keyupを生成します.

 1 <input type="text" id="text">
 2 <script>
 3     document.getElementById("text").onkeypress = function() {
 4         console.log("keypress");
 5     };
 6     document.getElementById("text").onkeyup = function() {
 7         console.log("keyup");
 8     };
 9     document.getElementById("text").onkeydown = function() {
10         console.log("keydown");
11     };
12 script>

コンソール出力:
keydownkey presskeyup
 
2、ブラウザの互換性
(1)FireFox、Opera、Chrome
イベントに対応する関数には、イベントが発生することを示す隠し変数eがあります.
e属性e.whichは、どのキーが押下されたかを示し、このキーの索引値(キーコード)を与える.
静的関数String.from CharCode()は、インデックス値(キーコード)をキーに対応する文字に変換することができる.

1 <input type="text" id="text">
2 <script>
3     document.getElementById("text").onkeypress = function(e) {
4         alert("   : " + e.which + "   : " + String.fromCharCode(e.which));    
5     };
6 script>

FireFox、Opera、Chromeに入力する:a
出力:キーコード:97文字:a
 
(2)IE
IEはe変数を必要とせず、Windows.イベントが発生したことを示す.
window.eventは、どのキーが押されたかを示すプロパティwindow.event.keyCodeがあり、このキーのインデックス値(キーコード)を与えます.
静的関数String.from CharCode()は、インデックス値(キーコード)をキーに対応する文字に変換することができる.
eg:

1 <input type="text" id="text">
2 <script>
3     document.getElementById("text").onkeypress = function() {
4         alert("   : " + window.event.keyCode + "   : " + String.fromCharCode(window.event.keyCode));    
5     };
6 script>

IEに入力:a
出力:キーコード:97文字:a  
 
3、ブラウザの種類を判断して、navigatorオブジェクトのappName属性を利用する.
IE:navigator.apName=「Microsoft Internet Explorer」
FireFox、Opera、Chrome:navigator.appName==「Netscape」
eg:

1 <input type="text" id="text">
2 <script>
3     document.getElementById("text").onkeypress = function(e) {
4         if (navigator.appName == "Microsoft Internet Explorer") 
5             alert("   : " + window.event.keyCode + "   : " + String.fromCharCode(window.event.keyCode)); 
6         else if (navigator.appName == "Netscape") 
7             alert("   : " + e.which + "   : " + String.fromCharCode(e.which));     
8     };
9 script>

IE、FireFox、Opera、Chromeに入力する:a
出力:キーコード:97文字:a
簡略化された書き方:

1 <input type="text" id="text">
2 <script>
3     document.getElementById("text").onkeypress = function(e) {
4         e = e || window.event;
5         key = e.keyCode || e.which || e.charCode;
6         alert("   : " + key + "   : " + String.fromCharCode(key));     
7     };
8 script>

説明:IEはkeyCode属性のみで、FireFoxにはwhichとcharCode属性があり、OperaにはkeyCodeとwhich属性があり、ChromeにはkeyCode、whichとcharCode属性があります.
 
転載元:https://blog.csdn.net/zhouziyu2011/article/details/53978293
 
 
 
keyCodeの対応するキーの値は次の通りです.

 1 keycode    8 = BackSpace BackSpace
 2 keycode    9 = Tab Tab
 3 keycode   12 = Clear
 4 keycode   13 = Enter
 5 keycode   16 = Shift_L
 6 keycode   17 = Control_L
 7 keycode   18 = Alt_L
 8 keycode   19 = Pause
 9 keycode   20 = Caps_Lock
10 keycode   27 = Escape Escape
11 keycode   32 = space space
12 keycode   33 = Prior
13 keycode   34 = Next
14 keycode   35 = End
15 keycode   36 = Home
16 keycode   37 = Left
17 keycode   38 = Up
18 keycode   39 = Right
19 keycode   40 = Down
20 keycode   41 = Select
21 keycode   42 = Print
22 keycode   43 = Execute
23 keycode   45 = Insert
24 keycode   46 = Delete
25 keycode   47 = Help
26 keycode   48 = 0 equal braceright
27 keycode   49 = 1 exclam onesuperior
28 keycode   50 = 2 quotedbl twosuperior
29 keycode   51 = 3 section threesuperior
30 keycode   52 = 4 dollar
31 keycode   53 = 5 percent
32 keycode   54 = 6 ampersand
33 keycode   55 = 7 slash braceleft
34 keycode   56 = 8 parenleft bracketleft
35 keycode   57 = 9 parenright bracketright
36 keycode   65 = a A
37 keycode   66 = b B
38 keycode   67 = c C
39 keycode   68 = d D
40 keycode   69 = e E 
41 keycode   70 = f F
42 keycode   71 = g G
43 keycode   72 = h H
44 keycode   73 = i I
45 keycode   74 = j J
46 keycode   75 = k K
47 keycode   76 = l L
48 keycode   77 = m M 
49 keycode   78 = n N
50 keycode   79 = o O
51 keycode   80 = p P
52 keycode   81 = q Q
53 keycode   82 = r R
54 keycode   83 = s S
55 keycode   84 = t T
56 keycode   85 = u U
57 keycode   86 = v V
58 keycode   87 = w W
59 keycode   88 = x X
60 keycode   89 = y Y
61 keycode   90 = z Z

参考記事:https://blog.csdn.net/lyj787505955/article/details/38560101
 
注:JavaScriptはキーボードに対する傍受イベントのみを提供しており、クライアントのハードウェア情報(IEではActiveXObjectオブジェクトを通じて入手できます)を取得できません.クライアントのハードウェア状態はJavaScript言語の制限です.だから、ユーザーのキーボードに対する応答イベントを傍受するしかなく、ユーザの現在のキーが大きさか小文字状態かを判断できます.現在、ネットワーク上のすべての判定の大きさと書き込みはユーザーのボタンを監督してこそ判断できます.
つまり、キーボードを押した時に得られたアルファベットの大きさや書いたkeycodeの値を測定するだけで、キーボードのこのときのCapslockキーがオンされているかどうかを判断でき、直接にCapslockキーの状態を判断することができない.