Wordle克隆开发：如何用Keycode数组在keyup事件中过滤合法输入

你的问题出在**in操作符的使用方式**上：in用于检查对象的属性是否存在，对于数组来说，它检查的是数组的索引（比如0、1、2...），而不是数组里的元素值。所以当你按Q键（keyCode=81）时，81 in key_codes实际是在问“这个数组有没有索引为81的元素”，显然你的数组长度远小于81，所以条件永远不成立。

修复代码 #

把in换成数组的includes()方法，它专门用来检查数组是否包含某个元素：

// Keyboard
// Listen for key being released
let key_codes = [81,87,69,82,84,89,85,73,79,80,
                  65,83,68,70,71,72,74,75,76,
                  13,90,88,67,86,66,78,77,8];
document.addEventListener('keyup', (e) => {
    if (key_codes.includes(e.keyCode)) {
        console.log(e.keyCode);
    }
});

更优方案：避免使用已废弃的keyCode #

keyCode是已被标准废弃的属性，推荐使用更直观的e.key或e.code。比如直接检查字母键和功能键（回车、退格）：

// 定义允许的按键（字母不区分大小写，加上回车、退格）
const allowedKeys = ['q','w','e','r','t','y','u','i','o','p',
                     'a','s','d','f','g','h','j','k','l',
                     'enter','z','x','c','v','b','n','m','backspace'];

document.addEventListener('keyup', (e) => {
    const pressedKey = e.key.toLowerCase();
    if (allowedKeys.includes(pressedKey)) {
        console.log(pressedKey);
    }
});

这样代码可读性更强，也不用记忆繁琐的keyCode数值。

内容的提问来源于stack exchange，提问作者auto-noah