Bootstrap4下x-editable文本类型popup模式无法编辑的解决方法

DevOps 小满

2026-7-25

Bootstrap4下X-editable Popup模式文本无法编辑的解决办法

问题描述

使用Bootstrap4的x-editable组件时，设置类型为text且mode:'popup'时，弹窗能正常打开但无法修改原有文本；切换为inline模式则功能完全正常。日期选择、列表选择的popup模式均可正常工作。

初始化代码如下：

<a href="#" id="editDescrDoc" data-title="Description" data-type="text" data-pk="1">@description</a>

<script>
$('#editDescrDoc').editable({
    mode : 'popup',
    pk : 1,
    title : 'Specify description',
    emptytext: 'empty',
});
</script>

解决方法

1. 更换为适配Bootstrap4的X-editable版本

原版X-editable官方维护停留在Bootstrap3阶段，直接用于Bootstrap4会存在兼容性问题，需使用社区维护的Bootstrap4适配分支版本。

2. 修复输入框焦点与层级问题

Bootstrap4的modal弹窗样式可能导致X-editable的输入框无法获取焦点，或被弹窗遮罩层覆盖，可通过以下两种方式解决：

CSS调整层级：

.editable-popup .form-control {
    z-index: 9999;
    position: relative;
}

手动触发焦点：在editable的shown事件中强制让输入框获取焦点

$('#editDescrDoc').editable({
    mode : 'popup',
    pk : 1,
    title : 'Specify description',
    emptytext: 'empty',
    shown: function() {
        $(this).find('input[type="text"]').focus();
    }
});

3. 自定义Text类型的Popup模板

若默认模板存在结构问题，可自定义模板确保输入框可编辑：

// 重定义弹窗按钮样式适配Bootstrap4
$.fn.editableform.buttons = 
    '<button type="submit" class="btn btn-primary editable-submit">'+
        '<i class="fa fa-check"></i>'+
    '</button>'+
    '<button type="button" class="btn btn-secondary editable-cancel">'+
        '<i class="fa fa-times"></i>'+
    '</button>';

// 自定义text类型输入框模板
$.fn.editabletypes.text.defaults.tpl = '<input type="text" class="form-control" autocomplete="off">';