bugfix> html > 投稿

だから、私はシンプルな電卓アプリを作っています。電卓に「1」を入力するボタンがあります。私が欲しいのは、「1」ボタンをクリックするか、キーボードの「1」を押すと、1が計算機に入力されることです。ここに私のコードがあります-

<td><input type="button" class="button" name="one" value="1" onclick="calculator.display.value += '1'" onkeypress="if(event.keyCode == 49){calculator.display.value += '1'}"></td>

そして、私の電卓の表示ボックスは-

<input type="text" name="display" id="display" disabled>

ここで「1」ボタンをクリックすると、表示ボックスに1が表示されます。しかし、キーボードで「1」を押しても何も起こりません。 しかし、最初に「1」ボタンをクリックしてからキーボードの「1」を押すと、「11」が表示ボックスに入ります。つまり、キーボードを介して入力が受け入れられます。 ボタンをクリックせずにキーボードからこの入力が必要です。 助けてください。 前もって感謝します。

回答 4 件
  • onkeypress を適用するとき  特定の要素へのイベントは、イベントがその要素に関連しているため、キー押下イベントをキャッチするために要素にフォーカスする必要があるため、意図したとおりに動作しません。

    let display = document.getElementById("display");
    document.body.onkeypress = function() {
      // Include all numbers, 0-10
      for (var i = 0; i < 10; i++) {
        if (event.keyCode == i + 48) display.value += i;
      }
    };
    
    
    <html>
    <body>
      <input type="text" id="display" disabled />
      <br>
      <button id="btn1" onclick="display.value += '1'">1</button>
      <button id="btn2" onclick="display.value += '2'">2</button>
      <button id="btn3" onclick="display.value += '3'">3</button>
    </body>
    </html>
    
    


    また、別のメモでは、何らかの形で質問とは無関係ですが、ここで取り上げられています。インラインJS -それは一般的に悪い習慣と見なされます。それを正当化する場合もありますが、避けるべきだというのが一般的なコンセンサスです。続きを読む:

    インラインJavaScriptは良いですか、悪いですか?

    インラインCSSとJavaScriptコードがなぜそんなに悪いのか

    Reddit-インラインonclick = "function()"がこのような悪い習慣と見なされるのはなぜですか?

  • 問題はあなたの onkeypress() の位置です 、たとえば <body> の入力タグの外に移動した場合  またはあなたの <table> で  イベントをキャッチできる「フォーカスゾーン」を大きくすることができます。

    <head>
      <script>
      function onClick(val)
      {
        document.getElementById("display").value += val;
      }
        
      function onPress()
      {
        switch(event.keyCode)
          {
            case 49: document.getElementById("display").value += 1;
            break;
            case 50: document.getElementById("display").value += 2;
            break;
          }
      }
      </script>
    </head>
    <body onkeypress="onPress()">
      <table>
        <td>
          <input type="button" class="button" name="one" value="1" onclick="onClick(1)">
        </td>
      </table>
      
      <input type="text" name="display" id="display" disabled/>
      
    </body>
    
    

    このヘルプを願っています:)

  • onkeypress  フォーカスがボタンにある場合にのみ機能します。最初にボタンをクリックしないと、ボタンにフォーカスが置かれず、ボタンはキー入力を認識できません。ボタンをクリックするとすぐにフォーカスが移り、キー入力を認識できます。
    onkeypressイベントをbodyタグに追加してみてください。

    <body onkeypress="if(event.keyCode == 49){calculator.display.value += '1'}">
    
    

  • 別の回答で述べたように、onkeypressは要素がフォーカスされている場合にのみ機能します。また、インラインJSを使用しないでください。ただし、イベントが発生したときに実行する関数を両方のイベントが参照するようにします。入力要素を使用した例を次に示します。

    function myFunc () {
    	alert("event happening");
    }
    
    
    input:focus {
      background-color: red;
    }
    
    
    <input onkeypress="myFunc()" onclick="myFunc()"/>
    
    

    要素がクリックされると、イベントが発生します。また、要素にフォーカスがあり、キーが押されると、イベントが発生します。これが役立つことを願っています。

あなたの答え