javascript - 如何使用此 BootStrap 屏幕键盘进行多个输入字段？

Question

这是我想使用的键盘:

<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>

如您所见，现在输入仅定向到 empid。我希望能够在 empid 中输入 6 个字符后切换到另一个输入字段 (id='input2')。

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

Answer 1

更改data-target-input定位您的元素 #input-id或.form-control

即<div data-target-input="#my_input_id">或<div data-target-input=".my_input_class">

$('[data-toggle="keybrd"]').each(function(){
	var btn = $(this).find('.btn'), input = $($(this).data('target-input'));
	btn.on('click',function(e){
		e.preventDefault();
		var val = $(this).text();
		if(val=='Delete'){
			input.val(input.val().slice(0,-1));
		}else{
			input.val(input.val()+val);
		}
	});
});

@import url('https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
	<div class="row">
		<div class="col-sm p-0 pt-3">
			<input class="form-control form-control-lg" type="text" id="empid">
		</div>
	</div>
</div>

<div class="container my-3" id='first' data-toggle="keybrd" data-target-input="#empid">
	<div class="row btn-group-lg mb-3" role='group'>
		<button type="button" class="col-sm btn btn-primary py-3 mr-3">1</button>
		<button type="button" class="col-sm btn btn-primary py-3 mr-3">2</button>
		<button type="button" class="col-sm btn btn-primary py-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">4</button>
		<button type="button" class="col-sm btn btn-primary py-3 mr-3">5</button>
		<button type="button" class="col-sm btn btn-primary py-3">6</button>
	</div>
	<div class="row btn-group-lg mb-3">
		<button type="button" class="col-sm btn btn-primary py-3 mr-3">7</button>
		<button type="button" class="col-sm btn btn-primary py-3 mr-3">8</button>
		<button type="button" class="col-sm btn btn-primary py-3">9</button>
	</div>
	<div class="row btn-group-lg mb-3">
		<button type="button" class="col-sm btn btn-danger py-3 mr-3">Delete</button>
		<button type="button" class="col-sm btn btn-primary py-3 mr-3">0</button>
	</div>
</div>
<hr>
<div class="container">
	<div class="row">
		<div class="col-sm p-0 pt-3">
			<input class="form-control form-control-lg my-input" type="text">
		</div>
	</div>
</div>
<div class="container my-3" id='second' data-toggle="keybrd" data-target-input=".my-input">
	<div class="row btn-group-lg mb-3" role='group'>
		<button type="button" class="col-sm btn btn-primary py-3 mr-3">1</button>
		<button type="button" class="col-sm btn btn-primary py-3 mr-3">2</button>
		<button type="button" class="col-sm btn btn-primary py-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">4</button>
		<button type="button" class="col-sm btn btn-primary py-3 mr-3">5</button>
		<button type="button" class="col-sm btn btn-primary py-3">6</button>
	</div>
	<div class="row btn-group-lg mb-3">
		<button type="button" class="col-sm btn btn-primary py-3 mr-3">7</button>
		<button type="button" class="col-sm btn btn-primary py-3 mr-3">8</button>
		<button type="button" class="col-sm btn btn-primary py-3">9</button>
	</div>
	<div class="row btn-group-lg mb-3">
		<button type="button" class="col-sm btn btn-danger py-3 mr-3">Delete</button>
		<button type="button" class="col-sm btn btn-primary py-3 mr-3">0</button>
	</div>
</div>