zoukankan      html  css  js  c++  java
  • 键盘按钮keyCode大全

    字母和数字键的键码值(keyCode)
    按键键码按键键码按键键码按键键码
    A 65 J 74 S 83 1 49
    B 66 K 75 T 84 2 50
    C 67 L 76 U 85 3 51
    D 68 M 77 V 86 4 52
    E 69 N 78 W 87 5 53
    F 70 O 79 X 88 6 54
    G 71 P 80 Y 89 7 55
    H 72 Q 81 Z 90 8 56
    I 73 R 82 0 48 9 57
    数字键盘上的键的键码值(keyCode)功能键键码值(keyCode)
    按键键码按键键码按键键码按键键码
    0 96 8 104 F1 112 F7 118
    1 97 9 105 F2 113 F8 119
    2 98 * 106 F3 114 F9 120
    3 99 + 107 F4 115 F10 121
    4 100 Enter 108 F5 116 F11 122
    5 101 - 109 F6 117 F12 123
    6 102 . 110        
    7 103 / 111        
    控制键键码值(keyCode)
    按键键码按键键码按键键码按键键码
    BackSpace 8 Esc 27 Right Arrow 39 -_ 189
    Tab 9 Spacebar 32 Down Arrow 40 .> 190
    Clear 12 Page Up 33 Insert 45 /? 191
    Enter 13 Page Down 34 Delete 46 `~ 192
    Shift 16 End 35 Num Lock 144 [{ 219
    Control 17 Home 36 ;: 186 /| 220
    Alt 18 Left Arrow 37 =+ 187 ]} 221
    Cape Lock 20 Up Arrow 38 ,< 188 '" 222

    如果要使用组合键,则可以利用event.ctrlKey,event.shiftKey,event .altKey判断是否按下了ctrl键、shift键以及alt键

    另附上一段代码,

    可以根据按的键盘上的键,显示键盘动作,并显示keyCode值等

    代码:

    =============下面的可以复制,现在动手复制看效果吧===========

    <STYLE TYPE="text/css">
    TD {text-align:center}
    < /STYLE>
    < SCRIPT LANGUAGE="JavaScript">
    function init() {
    document.onkeydown = showKeyDown
    document.onkeyup = showKeyUp
    document.onkeypress = showKeyPress
    }
    
    function showKeyDown(evt) {
    evt = (evt) ? evt : window.event
    document.getElementById("pressKeyCode").innerHTML = 0
    document.getElementById("upKeyCode").innerHTML = 0
    document.getElementById("pressCharCode").innerHTML = 0
    document.getElementById("upCharCode").innerHTML = 0
    restoreModifiers("")
    restoreModifiers("Down")
    restoreModifiers("Up")
    document.getElementById("downKeyCode").innerHTML = evt.keyCode
    if (evt.charCode) {
    document.getElementById("downCharCode").innerHTML = evt.charCode
    }
    showModifiers("Down", evt)
    }
    function showKeyUp(evt) {
    evt = (evt) ? evt : window.event
    document.getElementById("upKeyCode").innerHTML = evt.keyCode
    if (evt.charCode) {
    document.getElementById("upCharCode").innerHTML = evt.charCode
    }
    showModifiers("Up", evt)
    return false
    }
    function showKeyPress(evt) {
    evt = (evt) ? evt : window.event
    document.getElementById("pressKeyCode").innerHTML = evt.keyCode
    if (evt.charCode) {
    document.getElementById("pressCharCode").innerHTML = evt.charCode
    }
    showModifiers("", evt)
    return false
    }
    function showModifiers(ext, evt) {
    restoreModifiers(ext)
    if (evt.shiftKey) {
    document.getElementById("shift" + ext).style.backgroundColor = "#ff0000"
    }
    if (evt.ctrlKey) {
    document.getElementById("ctrl" + ext).style.backgroundColor = "#00ff00"
    }
    if (evt.altKey) {
    document.getElementById("alt" + ext).style.backgroundColor = "#0000ff"
    }
    }
    function restoreModifiers(ext) {
    document.getElementById("shift" + ext).style.backgroundColor = "#ffffff"
    document.getElementById("ctrl" + ext).style.backgroundColor = "#ffffff"
    document.getElementById("alt" + ext).style.backgroundColor = "#ffffff"
    }
    < /SCRIPT>
    < /HEAD>
    
    <BODY onLoad="init()">
    < H1>Keyboard Event Handler Lab</H1>
    < HR>
    < FORM>
    < TABLE BORDER=2 CELLPADDING=2>
    < TR><TH></TH><TH>onKeyDown</TH><TH>onKeyPress</TH><TH>onKeyUp</TH></TR>
    < TR><TH>Key Codes</TH>
    <TD ID="downKeyCode">0</TD>
    <TD ID="pressKeyCode">0</TD>
    <TD ID="upKeyCode">0</TD>
    < /TR>
    < TR><TH>Char Codes (IE5/Mac; NN6)</TH>
    <TD ID="downCharCode">0</TD>
    <TD ID="pressCharCode">0</TD>
    <TD ID="upCharCode">0</TD>
    < /TR>
    < TR><TH ROWSPAN=3>Modifier Keys</TH>
    <TD><SPAN ID="shiftDown">Shift</SPAN></TD>
    <TD><SPAN ID="shift">Shift</SPAN></TD>
    <TD><SPAN ID="shiftUp">Shift</SPAN></TD>
    < /TR>
    < TR>
    <TD><SPAN ID="ctrlDown">Ctrl</SPAN></TD>
    <TD><SPAN ID="ctrl">Ctrl</SPAN></TD>
    <TD><SPAN ID="ctrlUp">Ctrl</SPAN></TD>
    < /TR>
    < TR>
    <TD><SPAN ID="altDown">Alt</SPAN></TD>
    <TD><SPAN ID="alt">Alt</SPAN></TD>
    <TD><SPAN ID="altUp">Alt</SPAN></TD>
    < /TR>
    < /TABLE>
    < /FORM> 
  • 相关阅读:
    vue-vue-cli3配置文件的查看和修改
    vue-vue-cli3初始化项目
    vue-vue构建版本runtime-compiler和runtime-only的区别
    vue-vue构建版本runtime-compiler和runtime-only的区别
    vue-vue-cli2目录结构介绍
    Redis设计与实现(十一)事件
    Redis设计与实现(十)AOF持久化
    Redis设计与实现(九)RDB持久化
    Redis设计与实现(八)数据库
    Redis设计与实现(七)对象
  • 原文地址:https://www.cnblogs.com/webqiand/p/4602786.html
Copyright © 2011-2022 走看看