Question

我在jQuery UI对话框的标题栏中放置了一个文本框。

不幸的是，它在标题栏中被禁用（或以其他方式无法点击）。

如何更改此设置以启用我的文本框？

var $dialog = $('#dlgsearch')
    .dialog({
        autoOpen: false,
        modal: true,
        resizable: false,
        draggable: false,
        maxWidth:600,
        maxHeight: 500,
        width: 600,
        height: 500,
        title: 'Text Search:<input type="text" id="input_search" maxlength="255">'
    });
});

Answer 1

看起来标题栏的可拖动属性（即使设置为false）导致无法关注文本框的问题。解决这个问题的一种方法是在对话框打开后立即在标题栏区域后面添加文本框，然后使用绝对坐标将其放回到顶部，如下所示：

title: 'Text Search: ',
    open: function(event, ui) {
        $('.ui-dialog-titlebar').after('<input type="text" id="input_search" 
            maxlength="255" style="position:absolute;top:13px;left:135px;">');
     },

我在这里设置了一个示例：http://jsfiddle.net/nemVr/2/

jQuery UI对话框 - 标题栏中的输入文本框被禁用？

1 个答案: