移动端点击Tabulator表格单元格时隐藏软键盘的实现方法

问题根源 #

你之前调用blur()无效，是因为Tabulator单元格编辑时，实际的交互元素（输入框/下拉框）是编辑器内部动态生成的，并非单元格本身。直接选中[tabulator-field]元素执行blur()，根本没命中真正的活跃输入元素。

可行解决方案代码 #

针对日期选择器和下拉框字段，通过Tabulator的编辑器API获取真实输入元素后执行失焦操作：

table.on("cellEditing", function(cell){
    // 替换为你实际需要处理的字段名
    const targetFields = ['datePicker', '你的下拉框字段名'];
    const currentField = cell.getField();

    if(targetFields.includes(currentField)){
        // 获取Tabulator编辑器实例
        const editor = cell.getEditor();
        
        if(editor && editor.input){
            // 让编辑器的输入元素失焦
            editor.input.blur();
        }

        // 保险方案：强制让当前页面活跃元素失焦，适配特殊场景
        setTimeout(() => {
            document.activeElement?.blur();
        }, 100); // 小延迟确保编辑器元素已完全渲染
    }
});

补充说明 #

• 把代码中的你的下拉框字段名替换为你项目里实际的下拉框字段标识；
• 加入setTimeout是因为cellEditing触发时，编辑器可能还未完成DOM渲染，延迟100ms能确保操作生效；
• 此方案允许软键盘短暂弹出后自动消失，符合你能接受的用户体验要求。

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