在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是事件对象。.key是一个事件属性，它获取被点击的键。当测试一个关键事件时，请确保首先单击测试区域以获得焦点。

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

Answer 3

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

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

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

如果您对表单验证更感兴趣，而不仅仅是将日志记录到控制台，您还可以执行以下操作:

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