Javascript 如何将此引导屏幕键盘用于多个输入字段？

这是我想使用的键盘：

<div id='key1' class="container my-3" id='first'>
    <div class="row btn-group-lg mb-3" role='group'>
                <button type="button" class="col-sm btn btn-primary py-3 mr-3" onclick="document.getElementById('empid').value=document.getElementById('empid').value + '1';">1</button>
                <button type="button" class="col-sm btn btn-primary py-3 mr-3" onclick="document.getElementById('empid').value=document.getElementById('empid').value + '2';">2</button>
                <button type="button" class="col-sm btn btn-primary py-3" onclick="document.getElementById('empid').value=document.getElementById('empid'). value + '3';">3</button>
            </div>
            <div class="row btn-group-lg mb-3">
                <button type="button" class="col-sm btn btn-primary py-3 mr-3" onclick="document.getElementById('empid').value=document.getElementById('empid').value + '4';">4</button>
                <button type="button" class="col-sm btn btn-primary py-3 mr-3" onclick="document.getElementById('empid').value=document.getElementById('empid').value + '5';">5</button>
                <button type="button" class="col-sm btn btn-primary py-3 " onclick="document.getElementById('empid').value=document.getElementById('empid').value + '6';">6</button>
            </div>
            <div class="row btn-group-lg mb-3">
                <button type="button" class="col-sm btn btn-primary py-3 mr-3" onclick="document.getElementById('empid').value=document.getElementById('empid').value + '7';">7</button>
                <button type="button" class="col-sm btn btn-primary py-3 mr-3" onclick="document.getElementById('empid').value=document.getElementById('empid').value + '8';">8</button>
                <button type="button" class="col-sm btn btn-primary py-3" onclick="document.getElementById('empid').value=document.getElementById('empid').value + '9';">9</button>
            </div>
            <div class="row btn-group-lg mb-3">
                <button type="button" class="col-sm btn btn-danger py-3 mr-3" onclick="document.getElementById('empid').value=document.getElementById('empid').value.slice(0, -1);">Delete</button>
                <button type="button" class="col-sm btn btn-primary py-3 mr-3" onclick="document.getElementById('empid').value=document.getElementById('empid').value + '0';">0</button>
    </div>
</div>

1.
2.
3.
4.
5.
6.
7.
8.
9
删除
0

正如您所看到的，现在，输入只指向empid。在empid中键入6个字符后，我希望能够切换到另一个输入字段（id='input2'）

---

我愿意使用jQuery/Javascript，但没有使用它们的经验。感谢所有帮助。

更改

数据目标输入

以目标元素

#输入id

或

。表单控件

i、 e.

或

$（'[data toggle=“keybrd”]'）。每个（函数（）{
var btn=$（this）.find（'.btn'），input=$（$（this.data（'target-input'））；
点击按钮，功能（e）{
e、 预防默认值（）；
var val=$（this.text（）；
如果（val=='Delete'）{
val（input.val（）.slice（0，-1））；
}否则{
input.val（input.val（）+val）；
}
});
});
@导入url（'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css');

1.
2.
3.
4.
5.
6.
7.
8.
9
删除
0

1.
2.
3.
4.
5.
6.
7.
8.
9
删除
0
更改
数据目标输入
以目标元素
#输入id
或
。表单控件

i、 e.
或


$（'[data toggle=“keybrd”]'）。每个（函数（）{
var btn=$（this）.find（'.btn'），input=$（$（this.data（'target-input'））；
点击按钮，功能（e）{
e、 预防默认值（）；
var val=$（this.text（）；
如果（val=='Delete'）{
val（input.val（）.slice（0，-1））；
}否则{
input.val（input.val（）+val）；
}
});
});
@导入url（'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css');

1.
2.
3.
4.
5.
6.
7.
8.
9
删除
0

1.
2.
3.
4.
5.
6.
7.
8.
9
删除
0
对于您正在尝试做的事情，我建议您不要使用jQuery，并考虑使用像VUE这样的简单JavaScript框架来将数据绑定到您的输入。如果您打算使用Jquery，我将执行以下操作


$（文档）.ready（函数（）{
var currentInput=0；
var totalInputs=2
$（'.number输入'）[currentInput].focus（）；
函数nextInput（）{
log（`currentInput:${currentInput}`）；
如果（当前输入<总输入-1）{
currentInput++；
$（'.number输入'）[currentInput].focus（）；
log（`newinput:${currentInput}`）；
}else if（currentInput>=totalInputs-1）{
电流输入=0；
$（'.number输入'）[currentInput].focus（）；
log（`newinput:${currentInput}`）；
}
}
$（'.enter input'）。单击（下一步输入）；
})

弗斯特
第二
1.
2.
3.
4.
5.
6.
7.
8.
9
删除
0
进入
对于您正在尝试做的事情，我建议您不要使用jQuery，并考虑使用像VUE这样的简单JavaScript框架来将数据绑定到您的输入。如果您打算使用Jquery，我将执行以下操作


$（文档）.ready（函数（）{
var currentInput=0；
var totalInputs=2
$（'.number输入'）[currentInput].focus（）；
函数nextInput（）{
log（`currentInput:${currentInput}`）；
如果（当前输入<总输入-1）{
currentInput++；
$（'.number输入'）[currentInput].focus（）；
log（`newinput:${currentInput}`）；
}else if（currentInput>=totalInputs-1）{
电流输入=0；
$（'.number输入'）[currentInput].focus（）；
log（`newinput:${currentInput}`）；
}
}
$（'.enter input'）。单击（下一步输入）；
})

弗斯特
第二
1.
2.
3.
4.
5.
6.
7.
8.
9
删除
0
进入