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

我正在用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>

//卡通数值在“uitkomst”输入中消失。
功能核磁共振（val）{
document.getElementById（'uitkomst'）。value+=val；
}
函数reken（）{
//ALS er op de=teken是geklikt>>
//我认为“未来”价值观的变化是不可能的
var value1=document.getElementById（'uitkomst'）。值；
//所有变量都符合执行价值的“评估”。
//“eval”是执行官van een string的evalueren。
var res=评估值（值1）；
//toon/vul vervolgens bij de“uitkomst”de“res”variabele
document.getElementById（'uitkomst'）。value=res；
}
//als je op de“C”按钮的最大值为“0”
//在青春痘中，你会感到疼痛。
函数leeg（）{
document.getElementById（'uitkomst'）。value=“”；
}
计算器的表格：
为了给你一个潜在的起点，你可以考虑以下几点。下面的基本计算器键盘提供了典型计算器上的基本按钮-键盘上的每个按钮都分配了自己的
keyCode
编号，您可以通过检查
事件
对象来访问该编号。这些
事件
在下面的示例中是
键控
和
单击
——还有其他事件，但这些就足够了

每个数字按钮都分配了一个名称和一个值-实际上并不需要该名称。每个
函数
按钮都被类似地分配了名称和值-在这种情况下，您可能会在执行实际计算时使用该名称，因为它可能更容易引用名称而不是值

javascript
事件
监听器只会提醒值或键代码，但您会发现，按下任何键都不会创建该提醒，除非它在允许的范围内（由数组
validkeys给出）
）-这允许您使用键盘和鼠标作为计算器的输入。要添加更多的
功能
按钮，请检查控制台，按下任何键都应显示相应的
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>


document.addEventListener（'DOMContentLoaded'，函数（事件）{
const output=document.querySelector（'output'）；
常量keyhandler=函数（e）{
设key=e.keyCode；
控制台信息（键）；
/*
允许的密钥：
整数0-9
0   =>  48
1.
2.
3.
4.
5.
6.
7.
8.
9   =>  57
c=>67
+   =>  107
-   =>  109
*   =>  106
/   =>  111
=   =>  187
.   =>  190
努帕德0-9
96 - 105
*/
常数validkeys=[48,49,50,51,52,53,54,55,56,57,67107109106111187190,96,97,98,99100101102104105]；
if（~validkeys.indexOf（key））{
/*按下的任何键都在允许值内*/
警报（键）
}
};
常量clickhandler=函数（e）{
警报（this.value）
};
/*绑定事件侦听器-键入并单击按钮*/
文件。添加的监听器（'keyup'，keyhandler）；
Array.from（document.querySelectorAll（'input[type=“button”]”））.forEach（bttn=>{
bttn.addEventListener（'click'，clickhandler）
});
});
您是否共享了所有代码？将单个事件侦听器绑定到文档并观察按键/keyup事件-使用返回的
keyCode
值确定它是否适合作为calculator@RishiRaut是的，最重要。@RamRaider我不太懂编码，所以我不知道该怎么办。@Goks:因为你是新来的，请看一些例子，虽然这可能是一个可行的解决方案，但对于OP的要求，它显然是不够深入（按位运算符，添加键盘支持），他无法理解您正在尝试做什么。我觉得你应该考虑OP的技能水平。@nbokmans-你提到的
键盘支持
是@OP的一项特殊要求，因此忽略了这一点将是一个糟糕的开始。表面上看，这可能看起来很复杂，也许超出了OP的知识范围（也许我们不应该对此作出判断！），但由于他们正在尝试这种程度的东西，这也许不是一个太大的步骤。我已经习惯于编写这样的代码了，我忘了其他人可能不太熟悉其中的一些技巧（按位
~
等）