Question

所以我正在制作一个简单的计算器应用程序。现在我有一个按钮输入＆＃39; 1＆＃39;在计算器中。我想要的是每当我点击＆＃39; 1＆＃39;按钮或按“＆＃39; 1＆＃39;在我的键盘上，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>

现在发生的事情是当我点击＆＃39; 1＆＃39;按钮，1显示在我的显示框中。但是当我按下＆＃39; 1＆＃39;在我的键盘上，没有任何反应。但是，当我点击“1＆＃39;先按下按钮，然后按“＆＃39; 1＆＃39;在我的键盘上，＆＃39; 11＆＃39;进入显示框，即通过键盘接受输入。我想通过键盘输入这个输入，而不必单击按钮。请帮忙。提前谢谢。

Answer 1

问题在于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>

希望这有帮助：）

Answer 2

仅当焦点在按钮上时，

onkeypress才有效。如果您没有先点击按钮，则按钮不会重点按钮，按钮无法识别按键。一旦你点击按钮，它就会获得焦点，它可以识别按键您可以尝试将onkeypress事件添加到您的body标签。

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

Answer 3

当您将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 - 它通常被认为是不好的做法。有些案例可能会证明这一点，但普遍的共识是应该避免这种情况。 了解详情：

Answer 4

正如在另一个答案中所提到的，onkeypress仅在元素聚焦时才有效。此外，您不应该使用内联JS，但是让两个事件都引用您在事件发生时执行的函数。这是一个带输入元素的例子。

＆＃13;

"yyyy-MM-dd'T'HH:mm:ss"

＆＃13;

function myFunc () {
	alert("event happening");
}

＆＃13;

input:focus {
  background-color: red;
}

＆＃13;

单击元素时，事件将触发。此外，当元素被聚焦并按下一个键时，事件将触发。希望这很有用。

如何在HTML中为一个按钮组合onclick和onkeypress事件？

4 个答案: