使用键盘而不是使用计算器单击鼠标 - 使用 JavaScript 创建

Question

我正在用JavaScript做一个计算器。

我想确保当我按下键盘上的某个键时，它出现在文本框中，而无需单击文本框。所以基本上，我不仅希望你用鼠标点击计算器按钮，还希望你使用按键。但是我如何确定这一点呢？请指教。

以下是代码：

<script>
// toon values die aangeklikt worden in de 'uitkomst' input.
function nmr(val){
document.getElementById('uitkomst').value+=val;
}
function reken(){
// ALS er op de = teken is geklikt >>
// ik maak een variabele aan dat de "uitkomst" values ophaalt
var value1= document.getElementById('uitkomst').value;
// ik maak een variabele aan dat vervolgens met 'eval' de value execute. 
// 'eval' is het evalueren of het executen van een string.
var res = eval(value1);
// toon/vul vervolgens bij de "uitkomst" de "res" variabele
document.getElementById('uitkomst').value=res;  
}
// als je op de "C" button klik maakt hij de value "0"
// en zorgt hij eigenlijk dat er niks in zit.
function leeg(){
document.getElementById('uitkomst').value="";
}
</script>
<!-- Maak een gewone tabel aan en zorg voor de indeling van cijfers en andere knopjes.-->
The table for the calculator:
<table border="2" align="center">
<tr>            
<td colspan="3">
<input style="background-color:black;color:white;" 
type="text" name="uitkomst" id="uitkomst">
</td>
<td>
<input type="button" class="btn1" value="+" onClick="nmr('+')" /> 
</td>        
</tr>
<tr>        
<td>
<input type="button" class="btn1" value="1" onClick="nmr('1')" />
</td>
<td>
<input type="button" class="btn1" value="2" onClick="nmr('2')"/>
</td>
<td>
<input type="button" class="btn1" value="3" onClick="nmr('3')"/>
</td>
<td>
<input type="button" class="btn1" value="-"onClick="nmr('-')" />
</td>        
</tr>
<tr>        
<td>
<input type="button" class="btn1" value="4" onClick="nmr('4')"/>
</td>
<td>
<input type="button" class="btn1" value="5" onClick="nmr('5')"/>
</td>
<td>
<input type="button" class="btn1" value="6" onClick="nmr('6')"/>
</td>
<td>
<input type="button" class="btn1" value="X" onClick="nmr('*')"/> 
</td>        
</tr>
<tr>        
<td>
<input type="button" class="btn1" value="7" onClick="nmr('7')"/>
</td>
<td>
<input type="button" class="btn1" value="8" onClick="nmr('8')" /> 
</td>
<td>
<input type="button" class="btn1" value="9" onClick="nmr('9')" /> 
</td>
<td>
<input type="button" class="btn1" value="&divide;" onClick="nmr('/')" />
</td>        
</tr>
<tr>   
<td>
<input type="button" class="btn1" value=". " onClick="nmr('.')" /> 
</td>
<td>
<input type="button" class="btn1" value="0" onClick="nmr('0')" />
</td>
<td>
<input type="button" class="btn1" value="C" onClick="leeg()" /> 
</td>
<td>
<input type="button" class="btn1" value="=" onClick="reken()" /> 
</td>
</tr>
</table>

Answer 1

为了给你一个潜在的起点，你可以考虑以下几点。下面的基本计算器键盘提供了典型计算器上的基本按钮 - 键盘上的每个按钮都有自己的keyCode编号，您可以通过检查event对象来访问该编号。这些events在下面的示例中keyup和click- 还有其他的，但这些在这里就足够了。

每个数字按钮都被分配了一个名称和一个值 - 这个名称并不是真正需要的。每个function按钮都以类似方式分配了名称和值 - 在这种情况下，您可以在执行实际计算时使用名称，因为引用名称而不是值可能更容易。

javascriptevent侦听器只不过是提醒值或键代码，但你会发现，按下时没有键会创建该警报，除非它在允许的范围内(由数组validkeys给出( - 这允许您使用键盘和鼠标作为计算器的输入。要添加更多function按钮，请检查控制台，您按下的任何键都应显示相应的keyCode值。

<form id='calculator'>
<div id='lhs'>
<output></output>
<section id='numpad'>
<input type="button" name="k9" value="9" />
<input type="button" name="k8" value="8" />
<input type="button" name="k7" value="7" />
<input type="button" name="k6" value="6" />
<input type="button" name="k5" value="5" />
<input type="button" name="k4" value="4" />
<input type="button" name="k3" value="3" />
<input type="button" name="k2" value="2" />
<input type="button" name="k1" value="1" />
<input type="button" name="k0" value="0" />
</section>
</div>
<div id='rhs'>
<section id='operations'>
<input type="button" name="add" value="+" />
<input type="button" name="subtract" value="-" />
<input type="button" name="multiply" value="*" />
<input type="button" name="divide" value="/" />
<input type="button" name="point" value="." />
<input type="button" name="equals" value="=" />
<input type="button" name="clear" value="C" />
</section>
</div>
</form>
<script>
document.addEventListener('DOMContentLoaded',function(event){
const output=document.querySelector('output');
const keyhandler=function(e){
let key=e.keyCode;
console.info( key );
/*
permissable keys:
integers 0-9
0   =>  48
1
2
3
4
5
6
7
8
9   =>  57
c   =>  67
+   =>  107
-   =>  109
*   =>  106
/   =>  111
=   =>  187
.   =>  190
numpad 0-9 
96 - 105
*/
const validkeys=[ 48,49,50,51,52,53,54,55,56,57,67,107,109,106,111,187,190, 96,97,98,99,100,101,102,103,104,105 ];
if( ~validkeys.indexOf( key ) ){
/* Whatever key was pressed is in the permitted values */
alert( key )
}
};
const clickhandler=function(e){
alert( this.value )
};

/* Bind event listeners - keyup and button click */
document.addEventListener('keyup', keyhandler );
Array.from( document.querySelectorAll('input[type="button"]') ).forEach( bttn=>{
bttn.addEventListener('click',clickhandler)
});
});
</script>