在尝试扩展我的 JS 计算器项目的接口时，我决定添加一个键盘接口，以便您可以直接用键盘在输入框中书写。我还决定有一个选项，可以按回车键并处理计算并直接显示在输入框中。
当我创建一个检查键盘事件的函数时，它显示该事件不是“Enter”，即使我按下的键是 Enter（我控制台记录了该事件是什么，它是 Enter 吗？）。第一个日志显示事件为 Enter，第二条日志显示事件不等于 Enter）。这是该函数的代码-
function key_type(event) {
buttonElement = document.getElementById('input').value
if (event === 'Backspace') {
if (buttonElement === '') {}
else {buttonElement --}
}
if (event === 'Enter') {
equal()
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Oncalc</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins">
<style>
body {font-family:Poppins;}
button {padding:1.5%;margin:1.5%;border-radius: 10%;border:none; transition: 0.3s;}
button:hover {background-color: #cccccc;}
#operator {background-color: #ff6600;}
#operator:hover {background-color: #d7671c;}
input {
float: right;
width: 70vh;
height: 15vh;
padding: 10px;
font-size: 7vh;
border: 0.4vh solid #8d8d8d;
border-radius: 1vh;
box-sizing: border-box;
text-align: left;
outline: none;
transition: 0.5s;
margin-right: 15%;
font-style: italic;
}
input:focus{
border: 0.4vh solid #d7671c;
transition: 0.5s;
}
input:placeholder-shown {
color:#8d8d8d;
transition: 0.5s;
}
input:focus::placeholder {
color: #ffae79;
transition: 0.5s;
}
</style>
</head>
<body>
<button onclick="buttonElement += '1';" onmousedown="showtype('1')">1</button>
<button onclick="buttonElement += '2';" onmousedown="showtype('2')">2</button>
<button onclick="buttonElement += '3';" onmousedown="showtype('3')">3</button>
<button onclick="buttonElement += '4';" onmousedown="showtype('4')">4</button>
<button onclick="buttonElement += '5';" onmousedown="showtype('5')">5</button>
<button onclick="buttonElement += '6';" onmousedown="showtype('6')">6</button>
<br>
<button onclick="buttonElement += '7';" onmousedown="showtype('7')">7</button>
<button onclick="buttonElement += '8';" onmousedown="showtype('8')">8</button>
<button onclick="buttonElement += '9';" onmousedown="showtype('9')">9</button>
<button onclick="buttonElement += '0';" onmousedown="showtype('0')">0</button>
<button id="operator" onclick="buttonElement += '(';" onmousedown="showtype('(');">(</button>
<button id="operator" onclick="buttonElement += ')';" onmousedown="showtype(')');">)</button>
<input id="input" placeholder="Ex - 1+3" onkeyup="key_type(event)">
<br>
<button id="operator" onclick="buttonElement += '-';" onmousedown="showtype('-')">-</button>
<button id="operator" onclick="buttonElement += '+';" onmousedown="showtype('+')">+</button>
<button id="operator" onclick="buttonElement += '/';" onmousedown="showtype('/')">/</button>
<button id="operator" onclick="buttonElement += '*';" onmousedown="showtype('x')">X</button>
<button id="operator" onclick="buttonElement += '**';" onmousedown="showtype('**')">**</button>
<button id="operator" onclick="backspace('1');">CE</button>
<br>
<button id="operator" onclick="backspace('all');">C</button>
<button id="operator" onclick="equal();">=</button>
<script>
buttonElement = ''
function equal() {
document.getElementById('input').value = eval(buttonElement);
buttonElement = eval(buttonElement);
}
function showtype(char) {
document.getElementById('input').value += char
}
function key_type(event) {
buttonElement = document.getElementById('input').value
if (event === 'Backspace') {
if (buttonElement === '') {}
else {buttonElement --}
}
if (event === 'Enter') {
equal()
}
}
function backspace(cut) {
if (cut === 'all') {
document.getElementById('input').value = ''
buttonElement = ''
}
else if (cut === '1') {
str = document.getElementById('input').value;
modify_str = str.substring(0, str.length - 1);
document.getElementById('input').value = modify_str;
buttonElement = buttonElement.substring(0,str.length - 1)
}
}
</script>
</body>
</html>如果您能帮助我，我将非常感激。
在与“Enter”或任何其他键进行比较时，您需要在 if 语句中使用“event.key”，因为您需要“key”属性来知道按下了什么。