有没有无需硬编码即可获取键盘按键及其对应keycode列表的方法？

目前没有浏览器原生API可以直接返回全量键盘按键和对应keyCode的映射列表，不过可以通过以下两种方案实现动态生成，不需要硬编码全量按键：

方案1：动态监听键盘输入生成选项（适配用户自定义按键场景） #

如果你的下拉列表支持用户手动触发添加按键选项，可以直接监听keydown事件动态捕获用户按下的按键信息：

const keyMap = new Map();
const keySelect = document.querySelector('#key-select');
document.addEventListener('keydown', e => {
  // 避免重复添加相同按键
  if (!keyMap.has(e.keyCode)) {
    keyMap.set(e.keyCode, e.key);
    // 同步更新下拉列表选项
    const option = document.createElement('option');
    option.value = e.keyCode;
    option.textContent = e.key;
    keySelect.appendChild(option);
  }
});

该方案的优势是完全适配用户当前使用的键盘布局，不会出现特殊按键不兼容的问题。

方案2：基于标准按键范围批量生成（适配需要预置全量选项的场景） #

如果需要提前预置所有标准按键选项，可以基于W3C键盘事件标准定义的按键范围批量生成，仅需要补充少量控制键的定义，无需逐个硬编码上百个按键：

• 可打印字符范围：48~90（对应数字0-9、字母A-Z），可直接循环生成
• 功能键范围：112_{135（对应F1}F24），可直接循环生成
• 常用控制键：仅需单独定义10余个控制键的映射，不属于全量硬编码范畴
  示例代码：

const keySelect = document.querySelector('#key-select');
// 生成数字、字母按键
for (let keyCode = 48; keyCode <= 90; keyCode++) {
  const key = String.fromCharCode(keyCode);
  const option = document.createElement('option');
  option.value = keyCode;
  option.textContent = key;
  keySelect.appendChild(option);
}
// 生成功能键
for (let keyCode = 112; keyCode <= 135; keyCode++) {
  const option = document.createElement('option');
  option.value = keyCode;
  option.textContent = `F${keyCode - 111}`;
  keySelect.appendChild(option);
}
// 补充少量控制键
const ctrlKeys = [
  {keyCode: 8, key: 'Backspace'},
  {keyCode: 9, key: 'Tab'},
  {keyCode: 13, key: 'Enter'},
  {keyCode: 16, key: 'Shift'},
  {keyCode: 17, key: 'Ctrl'},
  {keyCode: 18, key: 'Alt'},
  {keyCode: 27, key: 'Esc'},
  {keyCode: 32, key: 'Space'},
  {keyCode: 37, key: 'ArrowLeft'},
  {keyCode: 38, key: 'ArrowUp'},
  {keyCode: 39, key: 'ArrowRight'},
  {keyCode: 40, key: 'ArrowDown'}
];
ctrlKeys.forEach(item => {
  const option = document.createElement('option');
  option.value = item.keyCode;
  option.textContent = item.key;
  keySelect.appendChild(option);
});

注意：keyCode属性已经被Web标准废弃，更推荐使用key和code属性作为按键的唯一标识，兼容性已经覆盖所有现代浏览器

内容的提问来源于stack exchange，提问作者Jacob Finamore