jQuery UI对话框button焦点
当一个jQuery UI对话框打开，似乎select其中一个button，并突出显示或设置焦点等…我怎样才能停止这种行为，以便没有任何button突出显示时，对话框打开？
编辑
我在没有从button中删除焦点的对话框选项中尝试了以下内容
... open:function(event, ui) { $("myunimportantdiv").focus(); }, ... 注意
作为一个临时的解决方法，我修改了用于ui-state-focus的css，但是这不是理想的…
使用模糊方法。 你可以试试这个例子。
<html> <head> <title>No Focus on jQuery Dialog</title> <link type="text/css" rel="stylesheet" href="ui.all.css" /> <script type="text/javascript" src="jquery-1.3.2.min.js"></script> <script type="text/javascript" src="ui.core.js"></script> <script type="text/javascript" src="ui.dialog.js"></script> <script type="text/javascript"> $(document).ready(function() { // Dialog to confirm or cancel // Focuses on confirm by default. $('#noFocusDialog').dialog({ autoOpen: false, buttons: { Confirm: function() { $(this).dialog('close'); }, Cancel: function() { $(this).dialog('close'); } } }); // Trigger to open the dialog $('#openNoFocusDialog').click(function() { $('#noFocusDialog').dialog('open'); // Remove focus on all buttons within the // div with class ui-dialog $('.ui-dialog :button').blur(); }); }); </script> </head> <body> <a id="openNoFocusDialog" href="#">Open Dialog</a> <div id="noFocusDialog"> <p>Confirm that no elements have focus</p> </div> </body> </html>
感谢您的答案，但在我看来，最好的解决scheme（至less对我来说，最less的代码，没有不必要的使用DOM的方法）是定义对象数组中的对话框button：
buttons: [{ id : "button1", text : "Button1 text", title : "tooltip1text1", tabIndex: -1, click : clickCallback },{ id : "button2", text : "Button2 text", title : "tooltip1text2", tabIndex: -1, click : function(){$(this).dialog("close")} }]
防止button获得焦点的重要部分是： tabIntex：-1
这也是一个方便和可读的方式给你的buttonid。
我有同样的问题…尝试将焦点设置到另一个元素似乎没有为我做的伎俩，但模糊焦点从选定的元素（在“打开”callback）做了：
$('#dialog').dialog ({ open: function () { $('#element-that-gets-selected').blur(); } });
我想一个方法来防止焦点，而不指定一个特定的名称将是使用第一个select器，如下所示：
$('#dialog').dialog ({ open: function () { $(this).find('select, input, textarea').first().blur(); } });
buttons: [ { tabIndex: -1, text: 'Yes', click: function(){ DeleteStuff(); $(this).dialog('close'); } }, { text: 'No', click: function(){ // Don't delete $(this).dialog('close'); } } ]
这是我得到它的唯一方法。 tabIndex：-1是解决scheme。
哦，我想专注于第二个button，所以我的“删除项目？ 确认将默认不删除该项目。
很明显，焦点是导致jQuery对话框打开时滚动到有趣的区域。 现在到处都是引用。
模糊的作品，但不是如果你有很多的内容。 如果button位于内容的底部，则模糊将移除select内容，但将对话滚动到底部。 使用scrollTop将内容滚动到顶部，但是保留选中的button。 如果用户不小心按下了返回键，则button或链接将会触发。 我select了一个组合：
$('#dialog').dialog({ open: function (event, ui){ $('a_selector').blur(); $(this).scrollTop(0); } });
像冠军一样工作…
这是我平时做的，一直工作：
open: function() { $('.ui-dialog button').removeClass('ui-state-focus'); },
基于ED和列夫的答案，我得到了这个很好的解决scheme：
jQuery("#testDialog").dialog({ height: 280, width: 400, open: function () { jQuery(this).closest( ".ui-dialog" ).find(":button").blur(); } });
或者，在调用其他button之前简单地创build一个虚拟input也同样适用。 这是有效的，因为UI简单地寻找第一个“input”作为默认值，通过欺骗UI看到第一个错误的input，焦点被redirect。
<div id="dialog-confirm" title="Warning!"> <input type='text' size='0' style='position:relative;top:-500px;' /> <span class="ui-icon ui-icon-alert" style="float: left; margin: 0 0 0 0;"></span> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> </div>
我偶然发现了一些可能会让别人觉得有用的东西。 像这样的解决scheme似乎为我工作：
$( "#button" ).click(function() { // this is a hack to prevent the focus from remaining after a click $(this).toggle(this.checked); });
它只是以编程方式将其重新设置，这似乎清除焦点问题。
那么，这里的所有解决scheme似乎与代码或黑客。 所以我会发布我的，这是基于CSS覆盖。 使我感到困扰的是使button看起来像“被选中”的轮廓，所以我简单地用“无”来压制它：
.ui-dialog .ui-dialog-titlebar button.ui-button:focus, .ui-dialog .ui-dialog-titlebar button.ui-button.ui-state-focus, .ui-dialog .ui-dialog-titlebar button.ui-button.ui-state-active, .ui-dialog .ui-dialog-titlebar button.ui-button.ui-state-hover { outline:none; }
你也可以添加/重写任何其他风格，这是困扰你:)
我知道答案已经被选中，但是很久以前我在这里find了一个简单的HTML解决scheme。
将下面的代码添加为您指定为对话框的DIV中的第一个元素。
<span class="ui-helper-hidden-accessible"><input type="text" /></span>
只需添加这一行来删除自动对焦function：
$.ui.dialog.prototype._focusTabbable = function(){};
您可以将其添加到共享的JavaScript文件中，并防止所有对话框的自动对焦！ 没有更多的复制和粘贴在所有的对话框中
