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

Cannot set focus to a form field in a jQuery UI dialog on clicking a jQueryUI menu item

本文关键字：UI jQuery 对话框 字段 表单 设置 焦点 单击 jQueryUI 菜单项      更新时间：2023-09-26

>我有一个包含单字段表单的jQuery UI对话框，并且autoOpen属性在开头设置为false。页面上还有另一个 jQuery UI 菜单，对话框的 open 函数绑定到菜单项的单击事件。我一直在尝试将焦点设置为对话框的唯一表单字段，当对话框在单击菜单项时打开时，不知何故没有运气。为了查明原因，我还添加了另一个测试按钮，通过单击该按钮，我可以将焦点设置为表单字段。所以我很确定是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小提琴

有趣。

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/

这个把我逼疯了。这是为我修复它的方法（@Trevor答案的更通用版本）。

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

在对话框页面上使用

$(window).load(function() {
   //Use Focus as $("#stsr").focus();
}
相关文章：