按键事件在 Javascript 中不起作用

Question

我正在尝试使用基本计算器来获得乐趣。我尝试附加一些事件，以便用户 van 使用 ENTER 获取结果并使用退格键返回。但是，键盘事件不起作用。

我也不明白为什么按下清空屏幕框时会出现C。

可能是什么问题？？

我做了一个fiddle： https://jsfiddle.net/9gvbd2nt/1/

const screen = document.getElementById('screen');
let screenValue = '';
const allowed = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '(', '=', '-', '/', '*', '+', ')', 'C'];

document.querySelectorAll('button').forEach((b) => {
    b.addEventListener('click', (e) => {
        let button = e.target.innerText;
        if (screenValue == '' && allowed.splice(11, 15).includes(button)) {
            console.log('Invalid Character: ' + button)
        }
        if (button === 'C') {
            screenValue = '';
            screen.value = screenValue;
        }
        if (button === '=') {
            evalTest(screen.value);
        } else {
            screenValue += button;
            screen.value = screenValue;
        }
        screen.focus();
    })
})

document.addEventListener("keydown", (e) => {
    if (e.key === 13) {
        e.preventDefault;
        evalTest(screen.value);
    }
    if (e.key === 8) {
        e.preventDefault;
        screenValue = screenValue.slice(-1);
        screen.value = screenValue;
    }
})

function evalTest(value) {
    const regex = new RegExp('[0-9\/\*\)\(\+\-\=\%]*')
    if (value.match(regex)[0] == value) {
        screen.value = eval(value);
    } else {
        alert('Illegal Operation');
    }
}

Answer 1

将 e.key 更改为 e.which 或 e.keyCode。

document.addEventListener("keydown", (e) => {
    if (e.which === 13) {
        e.preventDefault;
        evalTest(screen.value);
    }
    if (e.which === 8) {
        e.preventDefault;
        screenValue = screenValue.slice(-1);
        screen.value = screenValue;
    }
})

更新： which 和 keyCode 属性已弃用。你不应该使用 ASCII 值来检查 key 属性，只是键的名称：

document.addEventListener("keydown", (e) => {

  if (e.key === "Enter") {
    e.preventDefault;
    evalTest(screen.value);
  }
  if (e.key === "Backspace") {
    e.preventDefault;
    screenValue = screenValue.slice(-1);
    screen.value = screenValue;
  }
})

如果您想在将来检查其他键值，这里有一个键值列表：

https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values

按键事件在 Javascript 中不起作用

Keydown Events are not working in Javascript

html

javascript

calculator