按键文字识别不用插件

按键文字识别实现方案（无需插件）

核心原理

通过监听键盘事件（keydown/keyup/keypress），结合事件对象中的 event.key 或 event.code 属性获取按键信息,并映射为对应的文字。

实现步骤

基础按键监听

document.addEventListener('keydown', function(event) {
    const key = event.key; // 获取按键值（如 "a", "Enter"）
    const code = event.code; // 获取物理按键编码（如 "ArrowUp", "KeyA"）
    console.log(`按下的键：${key}（编码：${code}）`);
});

特殊按键处理

• 功能键：F1~F12、ArrowUp 等需通过 event.code 识别。
• 组合键：通过 event.ctrlKey、event.shiftKey 判断修饰键状态。
• 中文输入：需配合输入法状态检测（复杂场景建议使用输入法钩子）。

兼容性处理

完整示例代码

<input type="text" id="inputBox" placeholder="输入文字">
<div id="output"></div>
<script>
    const input = document.getElementById('inputBox');
    const output = document.getElementById('output');
    let textBuffer = '';
    input.addEventListener('keydown', function(event) {
        // 过滤功能键（如 Ctrl、Shift）
        if (event.key === 'Control' || event.key === 'Shift') return;
        // 处理退格键
        if (event.key === 'Backspace') {
            textBuffer = textBuffer.slice(0, -1);
        } else {
            textBuffer += event.key;
        }
        output.textContent = textBuffer;
    });
</script>

CSS预处理优化

通过 :focus-visible 伪类隐藏辅助元素：

#inputBox:focus + .helper-text {
    display: none;
}

问题与解答

Q1：如何识别组合键（如 Ctrl+C）？

A：需同时检测 event.key 和修饰键状态：

if (event.ctrlKey && event.key === 'c') {
    console.log('复制操作');
}

Q2：如何处理中文输入？

A：中文输入依赖输入法状态，需通过 document.activeElement 判断焦点元素是否为输入框，并监听 input 事件获取最终文本：

input.addEventListener('input', function(event) {
    console.log(`当前输入内容：${event.target.value}`);
});