[按下键时如何专注于输入？

Question

所以我为叔叔制作了英亩和克拉数计算器，正在使用香草javascript，当我按任意数字键盘上的数字键时，我想专注于文本输入并在文本框中键入该数字。键盘，我已经在网上搜索了一个小时左右，但是找不到想要的东西。

所以这就是它的样子。哦，我也忘了提及我想在单击键盘上的按键时使单击动画发生，但是我不知道该怎么做。任何帮助将不胜感激，并在此先感谢。

`

function onekey(event) {
    if(event.keyCode === 1) {
        input.focus();
        input.value += 1;
    }
 }

`

<td><button id="one" onkeypress="onekey(event)">1</button></td>

Answer 1

基本上，您的问题是您正在监听数字按钮上的按键-您需要创建一个全局按键监听器，以监听所有按键，然后更新您的输入内容

const input = document.getElementById('input');

function listenForKeyPress() {
  // add document event listener for all key presses
  document.addEventListener('keyup', (e) => {
    // check to see if the keypress was a number
    if (/[0-9]/g.test(e.key)) {
      // check to see if the input is not already focused
      if (document.activeElement !== input) {
        // focus element
        input.focus();
        // focus value
        input.value += e.key;
      }
    }
  })
}

// call function
listenForKeyPress();

<input id="input" type="number" />

如您所见，我们是

1. 听任何按键
2. 使用正则表达式检查按键是否为0-9之间的数字
3. 检查输入是否已经聚焦
4. 如果输入尚未聚焦-聚焦输入并更新输入值