Как объединить события onclick и onkeypress для одной кнопки в HTML? - PullRequest
Новая
       2

Как объединить события onclick и onkeypress для одной кнопки в HTML?

0 голосов
/ 25 мая 2018

Итак, я делаю простое приложение для калькулятора.Теперь у меня есть кнопка для ввода «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 ]

0 голосов
/ 25 мая 2018

Как уже упоминалось в другом ответе, onkeypress будет работать, только если элемент сфокусирован.Также вам не следует использовать встроенный JS, но пусть оба события относятся к функции, которую вы выполняете, когда происходит событие.Вот пример с элементом ввода. 

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

При нажатии на элемент происходит событие.Также, когда элемент находится в фокусе и нажата клавиша, происходит событие.Надеюсь, это полезно.

0 голосов
/ 25 мая 2018

onkeypress работает, только если фокус находится на кнопке.Если вы сначала не нажмете кнопку, фокус не будет на кнопке, и кнопка не сможет распознать нажатие клавиши.Как только вы нажмете кнопку, он получит фокус и сможет распознать нажатие клавиши.
Вы можете попробовать добавить событие onkeypress к тегу body. 

<body onkeypress="if(event.keyCode == 49){calculator.display.value += '1'}">
0 голосов
/ 25 мая 2018

Когда вы применяете событие 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 - этокак правило, считается плохой практикой.Некоторые случаи могут оправдать это, но, по общему мнению, этого следует избегать. Подробнее:

0 голосов
/ 25 мая 2018

Проблема заключается в положении вашего 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>

Надеюсь, эта помощь:)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...