如何解决Keydown事件在Javascript中不起作用
我正在尝试使用基本的计算器来娱乐。我尝试附加一些事件,以便用户van使用ENTER来获取结果,并使用退格键返回。但是,键盘事件不起作用。
我也不明白为什么按下C将其清空时,它会出现在屏幕框中。
可能是什么问题?
我做了一个小提琴: 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');
}
}
解决方法
将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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。