Cordova Android浏览器中JavaScript autotab的keyup/keydown事件不生效问题问询

原autotab逻辑绑定keyup事件且依赖keyCode判断输入类型，而Cordova封装的Android WebView中，软键盘触摸输入时大多不会触发标准keyup事件，第三方输入法、联想输入场景下keyCode也会返回异常值（通常为229），因此原逻辑无法正常触发。

• 替换事件绑定规则：改用兼容性更高的input事件监听输入值变化，补充keydown事件单独处理退格、方向键的跳转逻辑，覆盖所有输入场景
• 调整判断逻辑：去掉不可靠的keyCode判断，改为直接通过输入框内容长度判断是否触发跳转
• 优化输入框属性：将输入框type设置为tel强制唤起数字键盘，减少非数字输入的异常情况，移除行内重复的输入校验逻辑统一到JS中维护
• 补充属性配置：为所有输入框补全data-previous属性，保证退格跳转逻辑正常运行

JS代码 #

$('.digits').find('input').each(function() {
    const $current = $(this);
    $current.attr('maxlength', 1);

    // 监听输入事件，处理正向自动跳转
    $current.on('input', function() {
        const $parent = $current.parent();
        // 统一过滤非数字输入
        this.value = this.value.replace(/[^0-9]/g, '');
        
        // 输入完成后跳转到下一个输入框
        if (this.value.length === 1) {
            const nextId = $current.data('next');
            const $next = $(`#${nextId}`);
            if ($next.length) {
                // 添加短延迟解决Android WebView焦点切换卡顿问题
                setTimeout(() => {
                    $next.focus();
                    $next.select();
                }, 10);
            } else {
                // 到达最后一个输入框时触发自动提交
                if ($parent.data('autosubmit')) {
                    $parent.submit();
                }
            }
        }
    });

    // 监听按键事件，处理退格反向跳转
    $current.on('keydown', function(e) {
        // 退格键/左方向键且当前输入框为空时，跳转到上一个输入框
        if ((e.keyCode === 8 || e.keyCode === 37) && this.value.length === 0) {
            const prevId = $current.data('previous');
            const $prev = $(`#${prevId}`);
            if ($prev.length) {
                setTimeout(() => {
                    $prev.focus();
                    $prev.select();
                }, 10);
            }
        }
    });
});

CSS代码（无修改可直接复用） #

.verification-code {
    max-width: 100%;
    position: relative;
    text-align:center;
}
.control-label{
    display:block;
    margin:40px auto;
    font-weight:900;
}
.verification-code--inputs input[type=tel] {
    border: 2px solid #e1e1e1;
    width: 46px;
    height: 46px;
    padding: 10px;
    text-align: center;
    display: inline-block;
    box-sizing:border-box;
}

HTML代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="verification-code">
    <label class="control-label">Validation Code</label>
    <div class="verification-code--inputs digits text-black">
        <input class="text-black" id="digit-1" name="digit-1" data-next="digit-2" data-previous="" type="tel" maxlength="1" />
        <input class="text-black" id="digit-2" name="digit-2" data-next="digit-3" data-previous="digit-1" type="tel" maxlength="1" />
        <input class="text-black" id="digit-3" name="digit-3" data-next="digit-4" data-previous="digit-2" type="tel" maxlength="1" />
        <input class="text-black" id="digit-4" name="digit-4" data-previous="digit-3" type="tel" maxlength="1" />
    </div>
</div>

• 在项目config.xml中添加配置 <preference name="KeyboardDisplayRequiresUserAction" value="false" />，解除部分Android系统对JS主动触发输入焦点的限制
• 若仍存在焦点跳转异常，可安装cordova-plugin-keyboard插件辅助控制键盘状态，提升兼容性

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