jQuery UI对话框-标题栏中的输入文本框已禁用? [英] jQuery UI Dialog - Input textbox in the titlebar is disabled?

问题描述

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

I'm placing a textbox in the titlebar of my jQuery UI dialog.

不幸的是，在标题栏中时，它被禁用(否则无法单击).

Unfortunately, it is disabled (or otherwise unclickable) when in the titlebar.

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

How can I change this so that my text box is enabled?

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">'
    });
});

推荐答案

看起来标题栏的draggable属性(即使将其设置为false)也导致无法专注于文本框的问题.解决此问题的一种方法是，在对话框打开后，只需在标题栏区域后添加文本框，然后使用绝对坐标将其放回到顶部，如下所示:

It looks like the title bar's draggable attribute (even when set to false) is causing the issue of not being able to focus on the textbox. One way around this is to simply add the textbox after the title bar area as soon as the dialog opens and then position it back to the top with absolute coordinates like so:

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对话框-标题栏中的输入文本框已禁用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！