javascript - 单击 jQueryUI 菜单项时无法将焦点设置到 jQuery UI 对话框中的表单字段

Question

我有一个包含单字段表单的 jQuery UI 对话框，并且 autoOpen 属性在开始时设置为 false。页面上还有另一个 jQuery UI 菜单，对话框的打开功能绑定到菜单项的单击事件。当单击菜单项打开对话框时，我一直试图将焦点设置到对话框的唯一表单字段，但不知何故没有运气。为了查明原因，我还添加了另一个测试按钮，通过单击该按钮，我可以将焦点设置到表单字段。所以我很确定是 jQuery UI 菜单阻止了该领域的焦点。我想知道是否有任何方法可以规避这个限制。任何见解都值得赞赏。谢谢！

html:

<ul id="menu">
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
</ul>
</br>
<button id="btn">Open the dialog</button>

<div id="dialog" title="Basic dialog">
    <form>
        <input type="text" id="fld" />
    </form>
</div>

javascript:

$( "#dialog" ).dialog({
    autoOpen: false,
    open: function(event, ui){
        $('#fld').focus();
    }
});

$('#btn').click(function(e){
    $( "#dialog" ).dialog('open');
});

$('#menu li a').click(function(){
    $( "#dialog" ).dialog('open');
})

$( "#menu" ).menu({
    select: function( event, ui ) {
        $( "#dialog" ).dialog('open');
    }
});

这是js小提琴

Answer 1

有趣的。

jQuery 的菜单以某种方式影响焦点。我正在研究您的小提琴，我发现即使您将焦点延迟 1 毫秒，它也可以工作。

看看这个。

$( "#dialog" ).dialog({
   autoOpen: false,
   open: function(event, ui){
       setTimeout(function(){$('#fld').focus();},1);
   }
});

$('#btn').click(function(e){
   $( "#dialog" ).dialog('open');
});

$('#menu li a').click(function(){
   $( "#dialog" ).dialog('open');
})

$( "#menu" ).menu();

http://jsfiddle.net/XMEWu/1/

Answer 2

这个让我抓狂。这是为我解决的问题（@Trevor 答案的更通用版本）。

$('#element').dialog({
  open: function () {                        
    //focus fix
    $('textarea, input', $(this)).click(function() {
        var $inp = $(this);
        setTimeout(function () {
            $inp.focus();
        }, 1);
    });                        
  }
});

Answer 3

在对话框页面上使用

$(window).load(function() {
   //Use Focus as $("#stsr").focus();
}