键盘键码值 KeyCode 参考

工具简介

KeyCode 是键盘按键对应的 Unicode 字符代码或 Unicode 键代码，本工具提供了完整的键盘键码 KeyCode 参考。通过 e.keyCode 只读属性，我们可以在 JavaScript 的 onkeypress 事件处理程序中获取键对应的字符代码；以及在 onkeydown 和 onkeyup 事件处理程序中获取键代码。

注意： 在 Firefox 中，keyCode 属性在 onkeypress 事件中是无效的 (返回 0)。浏览器兼容问题，可以一起使用 which 和 keyCode 属性来解决：

// 在 onkeyxxx 事件处理程序中，使用 which 或 keyCode, 这样可支持不同浏览器
var x = event.which || event.keyCode;

另外，根据最新 Web DOM 规范，已不推荐使用 which 和 keyCode 属性，而是使用 key 属性来替代。

浏览器支持情况

keyCode 属性是在 DOM Level 2 Events 中定义，因此，有非常好的浏览器支持：

代码示例

1、获取键字符代码和键代码

下面的代码展示了在 keypress 和 keydown 事件中获取字符代码与键盘代码的方法：

<input type="text" onkeypress="uniCharCode(e)" onkeydown="uniKeyCode(e)">

<script type="text/javascript">
function uniCharCode(e) {
    var char = e.which || e.keyCode;
    document.getElementById("demo").innerHTML = "Unicode character code: " + char;
}

function uniKeyCode(e) {
    var key = e.keyCode;
    document.getElementById("demo2").innerHTML = "Unicode key code: " + key;
}
</script>

2、按回车 Enter 键提交表单功能

<form id="myForm" action="/">
    <input type="text" onkeypress="submit(e);"/>
</form>

<script type="text/javascript">
function submit(event) {
    // 获取用户单击键盘的“键值”
    var keyCode = event.keyCode ? event.keyCode : (event.which ? event.which : event.charCode);

    // 获取 form 表单实例
    var form = document.getElementById("myForm");

    // 如果是回车键
    if (keyCode == 13) {
        form.submit();
    }
}
</script>

3、禁止 Ctrl + C 复制文档内容

document.body.addEventListener("keydown", function(e){
    e = e || window.event;

    // 检测是否按下了 Ctrl 键
    var ctrl = e.ctrlKey ? e.ctrlKey : ((key === 17) ? true : false);
    
    // 按键检测
    var key = e.which || e.keyCode;

    // 67 是按键 C 的 Unicode 字符
    if (ctrl && key == 67) {
        return false;
    }
}, false);

本工具提供的交互式键码检测工具，希望对你的日常工作有所帮助。