Cordova应用中iOS自定义UI按钮键盘的无障碍Tab顺序问题

我之前在使用cordova-plugin-decimal-keyboard开发iOS Cordova应用时，也遇到过自定义小数点按钮的Tab键顺序问题——默认情况下这些按钮不会跟着输入框的焦点顺序走，导致键盘导航体验很差。下面几个实用的解决方案，你可以试试：

1. 动态设置按钮的tabindex与无障碍属性 #

插件生成的自定义按钮是动态插入到DOM中的，我们可以在页面加载完成后（或deviceready事件触发后），手动定位到这些按钮，设置合适的tabindex值，让它跟在目标输入框的焦点顺序之后：

document.addEventListener('deviceready', function() {
    // 延迟执行确保插件已完成DOM渲染
    setTimeout(function() {
        // 根据插件实际生成的DOM结构调整选择器，比如插件可能用特定class
        const decimalButton = document.querySelector('.decimal-keyboard .decimal-btn');
        const targetInput = document.getElementById('your-decimal-input');
        
        if (decimalButton && targetInput) {
            // 让按钮的tabindex紧跟输入框
            decimalButton.tabIndex = targetInput.tabIndex + 1;
            // 添加无障碍属性，支持屏幕阅读器
            decimalButton.setAttribute('role', 'button');
            decimalButton.setAttribute('aria-label', '插入小数点');
            // 确保按钮可通过键盘触发点击
            decimalButton.addEventListener('keypress', function(e) {
                if (e.key === 'Enter' || e.key === ' ') {
                    e.preventDefault();
                    decimalButton.click(); // 触发插件原有的点击逻辑
                }
            });
        }
    }, 600);
});

注意：你需要根据插件实际生成的DOM结构调整选择器，可以用浏览器开发者工具查看按钮的class或id。

2. 监听Tab键事件手动控制焦点流转 #

如果动态设置tabindex的方式不够稳定，你可以直接监听输入框和按钮的Tab键事件，手动控制焦点的切换：

const targetInput = document.getElementById('your-decimal-input');
const decimalButton = document.querySelector('.decimal-keyboard .decimal-btn');

// 输入框按Tab时，焦点移到小数点按钮
targetInput.addEventListener('keydown', function(e) {
    if (e.key === 'Tab' && !e.shiftKey) {
        e.preventDefault();
        decimalButton.focus();
    }
});

// 按钮按Shift+Tab时，焦点回到输入框
decimalButton.addEventListener('keydown', function(e) {
    if (e.key === 'Tab' && e.shiftKey) {
        e.preventDefault();
        targetInput.focus();
    }
});

这种方式能完全掌控焦点的流转逻辑，适合对无障碍体验要求较高的场景。

3. 修改插件源码（进阶方案） #

如果上面两种临时方案都不能满足需求，你可以直接修改插件的源码，在生成按钮时就设置好正确的tabindex和无障碍属性：

1. 找到插件的JS源码文件（通常在plugins/cordova-plugin-decimal-keyboard/www目录下）
2. 在创建小数点按钮的代码段中，添加tabindex、role和aria-label属性，确保它的tab值紧跟目标输入框。

这种方案一劳永逸，但需要注意插件更新时可能会覆盖你的修改，记得做好备份。

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