jQuery | Keydown() 示例

keydown() 是 jQuery 中处理键盘事件的函数之一。本示例将教你如何使用 keydown() 函数来监测用户按下键盘按键的事件。通过这个示例，你可以学到如何绑定 keydown() 事件、如何获取键码以及如何在用户按下指定的按键时做出相应的响应。

绑定 keydown() 事件

首先，你需要在需要绑定事件的元素上使用 keydown() 函数。比如，你可以在 body 元素上绑定此事件，这样在用户敲击键盘时该事件就会被触发：

$(document.body).keydown(function(event) {
    // 响应事件的代码
})

当用户在页面上敲击键盘时，这个事件就会被触发。

获取键码

在 keydown() 事件触发时，最重要的一点是获取用户按下的键的键码。键码是一个数字，代表按键的字符编码。你可以通过 event.keyCode 属性来获取用户按下的键的键码：

$(document.body).keydown(function(event) {
    var keyCode = event.keyCode;
    // 你的代码
})

此时 keyCode 就是用户按下的键的键码。

响应特定键

有了键码，我们就可以判断用户按下的是哪个键了。下面是一个将用户按下的键码转换为字符的 JavaScript 函数：

function getKeyChar(keyCode) {
    if (keyCode >= 65 && keyCode <= 90) { // A~Z
        return String.fromCharCode(keyCode);
    }
    else if (keyCode >= 48 && keyCode <= 57) { // 0~9
        return String.fromCharCode(keyCode);
    } 
    else if (keyCode >= 96 && keyCode <= 105) { // 小键盘 0~9
        return String.fromCharCode(keyCode - 48);
    }
    else {
        switch (keyCode) {
            case 32: return ' ';    // 空格
            case 13: return '\n';   // 回车
            case 27: return 'Esc';  // Esc
            case 8: return 'Backspace';  // 退格
            case 9: return 'Tab';   // Tab
            case 37: return 'Left'; // 左箭头
            case 38: return 'Up';   // 上箭头
            case 39: return 'Right'; // 右箭头
            case 40: return 'Down';  // 下箭头
            default: return null;   // 其他键
        }
    }
}

使用上述函数，我们就可以在 keydown() 事件中响应特定的按键了。例如，下面的代码将在用户按下字母键时在控制台中输出对应字符：

$(document.body).keydown(function(event) {
    var keyCode = event.keyCode;
    var keyChar = getKeyChar(keyCode);
    if (keyChar && keyChar.length === 1 && keyChar.match(/[a-zA-Z]/)) {
        console.log(keyChar);
    }
})

注意，此例中的判断条件 keyChar && keyChar.length === 1 && keyChar.match(/[a-zA-Z]/) 用于确保用户按下的键是一个字母键。

完整代码

最终，这个例子的完整代码将是这样的：

function getKeyChar(keyCode) {
    if (keyCode >= 65 && keyCode <= 90) { // A~Z
        return String.fromCharCode(keyCode);
    }
    else if (keyCode >= 48 && keyCode <= 57) { // 0~9
        return String.fromCharCode(keyCode);
    } 
    else if (keyCode >= 96 && keyCode <= 105) { // 小键盘 0~9
        return String.fromCharCode(keyCode - 48);
    }
    else {
        switch (keyCode) {
            case 32: return ' ';    // 空格
            case 13: return '\n';   // 回车
            case 27: return 'Esc';  // Esc
            case 8: return 'Backspace';  // 退格
            case 9: return 'Tab';   // Tab
            case 37: return 'Left'; // 左箭头
            case 38: return 'Up';   // 上箭头
            case 39: return 'Right'; // 右箭头
            case 40: return 'Down';  // 下箭头
            default: return null;   // 其他键
        }
    }
}

$(document.body).keydown(function(event) {
    var keyCode = event.keyCode;
    var keyChar = getKeyChar(keyCode);
    if (keyChar && keyChar.length === 1 && keyChar.match(/[a-zA-Z]/)) {
        console.log(keyChar);
    }
})

当用户按下字母键时，在控制台中将输出对应字符。

结论

keydown() 函数是一个很有用的 jQuery 事件函数，它可以很轻松地监测用户在网页上敲击键盘的事件。此外，通过获取键码，我们可以在用户按下特定的按键时做出相应的响应。这让我们能够很方便地实现一些有趣的交互效果。