单击jQueryUI菜单项时，无法在jQuery UI对话框中将焦点设置为表单字段 [英] Cannot set focus to a form field in a jQuery UI dialog on clicking a jQueryUI menu item

问题描述

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

I've got a jQuery UI dialog containing a one-field form and the autoOpen property is set to false at the beginning. There's another jQuery UI menu on the page and the dialog's open function is binding to the click event of the menu items. I've been trying to set focus to the only form field of the dialog when the dialog is open on click of the menu items somehow no luck. To pinpoint the cause I also added another test button and by clicking that button I can set focus to the form field. So I'm pretty sure it's the jQuery UI menu that is preventing the focus of the field. I wonder if there's any way that I can circumvent this constraint. Any insight is appreciated. Thanks!

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：

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小提琴

推荐答案

有趣。

jQuery的菜单以某种方式影响焦点。我正在调查你的小提琴，我发现即使你将焦点延迟1毫秒也可以。

jQuery's menu is affecting the on focus somehow. I was looking into your fiddle and I found that even if you delay the focus 1 millisecond it works.

看看这个。

$( "#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/

这篇关于单击jQueryUI菜单项时，无法在jQuery UI对话框中将焦点设置为表单字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！