这部分代码在 JS / CSS / HTML 编程中会有更短的版本吗？

Question

一道JS题/CSS/HTML编程！

再一次，我不擅长问问题的精确性，对于所有的困惑，我深表歉意。说说我对这部分代码的真实意图，看看能有什么解决办法。

我想邀请用户输入字符，这些字符将被放入变量characters的一部分以用于另一个功能create_random_string()。

如果是这样，有什么办法可以缩短document.addEventListener()部分的代码，提高效率？非常感谢！

var characters = '';
function create_random_string(string){
  var random_string = '';
  for (var i, i = 0; i < string; i++) {
     random_string += characters.charAt(Math.floor(Math.random() * characters.length));
  }
  return random_string; 
} 

document.addEventListener('keydown', function(event) {
  if(event.key == "a") {
    characters += "a";
  }
  else if(event.key == "b") {
    characters += "b";
  }
  else if(event.key == "c") {
    characters += "c";
  }
...
  else if(event.key == "x") {
    characters += "x";
  }
  else if(event.key == "y") {
    characters += "y";
  }
  else if(event.key == "z") {
    characters += "z";
  }

Answer 1

为什么不检查键的范围：

document.addEventListener('keydown', function(event) {
  if (event.key >= 'a' && event.key <= 'z'){
    console.log(event.key);
  }

Answer 2

e 是 Event Object. .key 是一个事件属性获取被点击的键。测试按键事件时，请务必先点击测试区域以获得焦点。

document.onkeydown = logKey;

function logKey(e) {
  console.log(e.key);
}

Answer 3

一种比其他答案更短的方法：

document.onkeydown = (e) => console.log(e.key);

这使用内联函数进一步减少答案的长度。

如果您对表单验证更感兴趣，而不仅仅是登录到控制台，您还可以按照以下方式进行一些操作：

function alphaOnly(event) {
  let key = event.keyCode;
  return ((key >= 65 && key <= 90) || key == 8);
};

这部分代码在 JS / CSS / HTML 编程中会有更短的版本吗？

Would there be a shorter version of this part of code in JS / CSS / HTML programming?

html

javascript

css