多输入框虚拟键盘自动跳转问题求助：仅能填充首个输入框

核心问题分析 #

• 重复ID冲突：两个可输入框共用tbInputID，document.getElementById仅能获取第一个匹配元素，导致第二个输入框无法被赋值。
• 输入逻辑僵化：input函数硬编码操作固定ID，未识别当前未填满的可输入框，也未处理输入完成后的自动跳转逻辑。
• 自动跳转逻辑错误：原jQuery代码中prop('enabled', false)是无效操作，且虚拟键盘点击输入不会触发原生input事件，导致跳转逻辑不生效。
• 删除功能不完整：del函数仅处理第一个输入框，未支持删除后跳回上一个输入框的操作。
• 缺失依赖函数：load函数中使用的contain函数未定义，导致随机键盘生成逻辑失效。

修正后的完整代码 #

<body onload="load();"> 
<div class="firma-box-resultado" style="display: flex; justify-content: center; align-items: center;">
        <input type="text" class="num-coordenada" readonly>
        <input type="text" id="tbInput1" class="num-coordenada active completo" maxlength="1">
        <input type="text" id="tbInput2" class="num-coordenada active completo" maxlength="1">
        <input type="text" class="num-coordenada" readonly>
        <input type="text" class="num-coordenada" readonly>
        <input type="text" class="num-coordenada" readonly>
</div>

<div id="VirtualKey">
            <input class="clave" id="btn1" type="button" onclick="input(this);" value="3" style="margin-right:1px;" />
            <input class="clave" id="btn2" type="button" onclick="input(this);" value="8" style="margin-right:1px;" />
            <input class="clave" id="btn3" type="button" onclick="input(this);" value="7" style="margin-right:1px;" />
            <input class="clave" id="btn4" type="button" onclick="input(this);" value="0" style="margin-right:1px;" />
            <input class="clave" id="btn5" type="button" onclick="input(this);" value="2" style="margin-bottom:5px;" />
            <br />
            <input class="clave" id="btn6" type="button" onclick="input(this);" value="1" style="margin-right:1px;" />
            <input class="clave" id="btn7" type="button" onclick="input(this);" value="9" style="margin-right:1px;" />
            <input class="clave" id="btn8" type="button" onclick="input(this);" value="4" style="margin-right:1px;" />
            <input class="clave" id="btn9" type="button" onclick="input(this);" value="5" style="margin-right:1px;" />
            <input class="clave" id="btn0" type="button" onclick="input(this);" value="6" style="margin-right:1px;" />
            <br />
            <br />
            <input id="btnDel" type="button" value="Borrar" onclick="del();" />
        </div>

<script type="text/javascript">
        function input(e) {
            // 获取所有可输入的active输入框
            const activeInputs = document.querySelectorAll('.num-coordenada.active:not([readonly])');
            // 找到第一个未填满的输入框
            const targetInput = Array.from(activeInputs).find(input => input.value.length < input.maxLength);
            
            if (targetInput) {
                targetInput.value = e.value;
                // 输入完成后自动跳转到下一个可输入框
                const currentIndex = Array.from(activeInputs).indexOf(targetInput);
                if (currentIndex < activeInputs.length - 1) {
                    activeInputs[currentIndex + 1].focus();
                }
            }
        }

        function del() {
            const activeInputs = document.querySelectorAll('.num-coordenada.active:not([readonly])');
            // 找到最后一个已填满的输入框
            const targetInput = Array.from(activeInputs).reverse().find(input => input.value.length > 0);
            
            if (targetInput) {
                targetInput.value = '';
                // 删除后聚焦到当前输入框
                targetInput.focus();
            }
        }

        function load() {
            var array = new Array();

            while (array.length < 10) {
                var temp = Math.round(Math.random() * 9);
                if (!contain(array, temp)) {
                    array.push(temp);
                }
            }
            for (i = 0; i < 10; i++) {
                var btn = document.getElementById("btn" + i);
                btn.value = array[i];
            }
        }

        // 补充缺失的contain函数
        function contain(arr, val) {
            return arr.includes(val);
        }
</script>

</body>

关键修正点说明 #

• 唯一ID分配：给两个可输入框设置唯一IDtbInput1和tbInput2，解决ID冲突问题。
• 动态输入匹配：input函数通过选择器动态获取可输入框，自动定位第一个未填满的框赋值，完成输入后自动跳转至下一个可输入框。
• 完善删除逻辑：del函数反向查找最后一个有内容的可输入框，清空后聚焦到该框，支持反向操作。
• 补充依赖函数：添加缺失的contain函数，确保随机键盘生成逻辑正常运行。
• 移除无效跳转逻辑：删除原jQuery的input事件监听，改为在虚拟键盘点击事件内直接处理跳转，适配虚拟键盘的输入场景。

内容的提问来源于stack exchange，提问作者Pegasus