blocks|key|1276196|text|这可能是浏览器行为，而不是jQuery插件问题。您是否尝试过在打开弹出窗口后以编程方式删除焦点。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1276197|$('#lnkAddReservation').click(function+()+{
++++dlg.dialog('open');

++++//+you+may+want+to+change+the+selector+below
++++$('input,textarea,select').blur();

++++return+false;
});|code-block|syntax|javascript|1276198|还没有测试过，但应该可以正常工作。|1276199|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

This can be a browser behavior not jQuery plugin issue. Have you tried removing the focus programmatically after you open the popup.

<pre><code>$('#lnkAddReservation').click(function () {
 dlg.dialog('open');

 // you may want to change the selector below
 $('input,textarea,select').blur();

 return false;
});
</code></pre>

Haven't tested that but should work ok.

blocks|key|1491086|text|将输入的tabindex设置为-1，然后设置dialog.open以在以后需要时恢复tabindex：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1491087|$(function()+{
++++$(+"#dialog-message"+).dialog({
++++++++modal:+true,
++++++++width:+500,
++++++++autoOpen:+false,
++++++++resizable:+false,
++++++++open:+function()
++++++++{
++++++++++++$(+"#datepicker1"+).attr("tabindex","1");
++++++++++++$(+"#datepicker2"+).attr("tabindex","2");
++++++++}
++++});
});|code-block|syntax|javascript|1491088|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Set the tabindex of the input to -1, and then set dialog.open to restore tabindex if you need it later:

<pre><code>$(function() {
 $( "#dialog-message" ).dialog({
 modal: true,
 width: 500,
 autoOpen: false,
 resizable: false,
 open: function()
 {
 $( "#datepicker1" ).attr("tabindex","1");
 $( "#datepicker2" ).attr("tabindex","2");
 }
 });
});
</code></pre>

blocks|key|1276261|text|我找到了下面的代码:用于打开的jQuery+UI对话框函数。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1276262|c([]).add(d.find(".ui-dialog-content+:tabbable:first")).add(d.find(".ui-dialog-buttonpane+:tabbable:first")).add(d).filter(":first").focus();|code-block|syntax|javascript|1276263|您可以解决jQuery行为，也可以更改行为。|1276264|tabindex+-1是一种变通方法。|1276265|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

I found the following code the jQuery UI dialog function for open.

<pre><code>c([]).add(d.find(".ui-dialog-content :tabbable:first")).add(d.find(".ui-dialog-buttonpane :tabbable:first")).add(d).filter(":first").focus();
</code></pre>

You can either workaround the jQuery behaviour or change the behaviour.

tabindex -1 works as a workaround.

blocks|key|1491198|text|我的内容比对话框还长。在打开时，对话框会切换到位于底部的第一个:tabbable。这就是我的解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1491199|$("#myDialog").dialog({
+++...
+++open:+function(event,+ui)+{+$(this).scrollTop(0);+}
});|code-block|syntax|javascript|1491200|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I had content that was longer than the dialog. On open, the dialog would scoll to the first :tabbable which was at the bottom. Here was my fix.

<pre><code>$("#myDialog").dialog({
 ...
 open: function(event, ui) { $(this).scrollTop(0); }
});
</code></pre>

blocks|key|1491215|text|您可以添加以下内容：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1491216|..。|1491217|dlg.dialog({+autoOpen:false,
modal:+true,+
width:+400,
open:+function(){++++++++++++++++++//+There+is+new+line
++$("#txtStartDate").focus();
++}
});|code-block|syntax|javascript|1491218|1491219|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

You can Add this :

...

<pre><code>dlg.dialog({ autoOpen:false,
modal: true, 
width: 400,
open: function(){ // There is new line
 $("#txtStartDate").focus();
 }
});
</code></pre>

...

blocks|key|1491246|text|我遇到了同样的问题，并通过在datepicker之前插入一个空输入来解决它，它在每次打开对话框时都会抢占焦点。此输入在每次打开对话框时都会隐藏，在关闭时会再次显示。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1491247|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

I'd the same issue and solved it by inserting an empty input before the datepicker, that steals the focus every time the dialog is opened. This input is hidden on every opening of the dialog and shown again on closing.

blocks|key|1491279|text|我也有同样的问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1491280|我所做的变通办法是在对话框容器的顶部添加虚拟文本框。|1491281|<input+type="text"+style="width:+1px;+height:+1px;+border:+0px;"+/>|code-block|syntax|javascript|1491282|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

I got the same problem.

The workaround I did is add the dummy textbox at the top of the dialog container.

<pre><code>&lt;input type="text" style="width: 1px; height: 1px; border: 0px;" /&gt;
</code></pre>

blocks|key|1491287|text|我的解决方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1491288|open:+function(){
++jQuery('input:first').blur();
++jQuery('#ui-datepicker-div').hide();
},++|code-block|syntax|javascript|1491289|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

My workaround:

<pre><code>open: function(){
 jQuery('input:first').blur();
 jQuery('#ui-datepicker-div').hide();
}, 
</code></pre>

blocks|key|1491302|text|简单的解决方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1491303|只需使用tabindex=1创建一个不可见元素...这将不会使datepicker+...|1491304|例如：|1491305|<a+href=""+tabindex="1"></a>
...
Here+comes+the+input+element|code-block|syntax|javascript|1491306|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|O|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|P|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

Simple workaround:

Just create a invisible element with tabindex=1 ...
This will not focus the datepicker ...

eg.:

<pre><code>&lt;a href="" tabindex="1"&gt;&lt;/a&gt;
...
Here comes the input element
</code></pre>

blocks|key|1276489|text|要扩展前面的一些答案(忽略辅助日期选择器方面)，如果想要防止focus()事件在对话框打开时聚焦于第一个输入字段，请尝试以下操作：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1276490|$('#myDialog').dialog(
++++{+'open':+function()+{+$('input:first-child',+$(this)).blur();+}
});|code-block|syntax|javascript|1276491|entityMap^0|U|7|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

To expand on some of the previous answers (and ignoring the ancillary datepicker aspect), if you want to prevent the <code>focus()</code> event from focusing the first input field when your dialog opens, try this:

<pre><code>$('#myDialog').dialog(
 { 'open': function() { $('input:first-child', $(this)).blur(); }
});
</code></pre>

blocks|key|1276580|text|好吧，现在还没有人找到解决方案，这很酷，但看起来我有东西要给你。坏消息是，对话框在任何情况下都会抓住焦点，即使对话框中没有输入和链接。我使用对话框作为工具提示，并且肯定需要将焦点停留在原始元素中。以下是我的解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1276581|使用选项autoOpen:+false|1276582|$toolTip.dialog("widget").css("visibility",+"hidden");+
$toolTip.dialog("open");
$toolTip.dialog("widget").css("visibility",+"visible");|code-block|syntax|javascript|1276583|当对话框不可见时，焦点不会设置在任何位置，而是停留在原始位置。它只适用于纯文本的工具提示，但不适用于功能更强大的对话框，因为在打开对话框时让对话框可见是很重要的。在任何情况下都可能工作得很好。|1276584|我理解最初的帖子只是为了避免将焦点放在第一个元素上，但您可以很容易地决定在对话框打开后焦点应该放在哪里(在我的代码之后)。|1276585|已在IE、FF和Chrome中测试。|1276586|希望这能对某些人有所帮助。|1276587|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|V|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|W|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|Y|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

Well, it is cool that nobody found the solution for now, but it looks like I have something for you. The bad news is that the dialog grabs focus in any case even if no inputs and links are inside. 
I use the dialog as a tooltip and definitely need focus stay in the original element. Here is my solution:

use option [autoOpen: false]

<pre><code>$toolTip.dialog("widget").css("visibility", "hidden"); 
$toolTip.dialog("open");
$toolTip.dialog("widget").css("visibility", "visible");
</code></pre>

While the dialog invisible, the focus is not set anywhere and stay in the original place. 
It works for tooltips with just a plain text, but not tested for more functional dialogs where it may be important to have dialog visible on opening moment. Probably will work fine in any case.

I understand that the original post was just to avoid getting focus on the first element, but you can easily decide where the focus should be after the dialog is opened (after my code).

Tested in IE, FF and Chrome.

Hopefully this will help somebody.

blocks|key|1276650|text|在它上面添加一个隐藏的跨度，使用ui-helper-+hidden+accessible来通过绝对定位来隐藏它。我知道您有这个类，因为您使用的是jquery-ui中的对话框，而且它在jquery-ui中。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1276651|<span+class="ui-helper-hidden-accessible"><input+type="text"/>|code-block|syntax|javascript|1276652|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Add a hidden span above it, use ui-helper-hidden-accessible to make it hidden by absolute positioning. I know you have that class because you are using dialog from jquery-ui and it's in jquery-ui.

<pre><code>&lt;span class="ui-helper-hidden-accessible"&gt;&lt;input type="text"/&gt;&lt;/span&gt;
</code></pre>

blocks|key|1491626|text|在我看来，这个解决方案非常好：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1491627|$("#dialog").dialog({
++++open:+function(event,+ui)+{
++++++++$("input").blur();
++++}
});|code-block|syntax|javascript|1491628|点击此处：unable-to-remove-autofocus-in-ui-dialog|offset|length|1491629|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/9834762/1349740^0|0|0|5|13|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

In my opinion this solution is very nice:

<pre><code>$("#dialog").dialog({
 open: function(event, ui) {
 $("input").blur();
 }
});
</code></pre>

Found here: <a href="https://stackoverflow.com/a/9834762/1349740">unable-to-remove-autofocus-in-ui-dialog</a>

blocks|key|1491734|text|我也有类似的问题。当验证失败时，我会打开一个错误对话框，它抓住了焦点，就像Flugan在他的answer中显示的那样。问题是，即使对话框中没有可选项卡的元素，对话框本身仍然是焦点。以下是来自jquery-ui-1.8.23\js\jquery.ui.Dialog.js的原始未压缩代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1491735|//+set+focus+to+the+first+tabbable+element+in+the+content+area+or+the+first+button
//+if+there+are+no+tabbable+elements,+set+focus+on+the+dialog+itself
$(self.element.find(':tabbable').get().concat(
++uiDialog.find('.ui-dialog-buttonpane+:tabbable').get().concat(
++++uiDialog.get()))).eq(0).focus();|code-block|syntax|javascript|1491736|评论是他们的！|1491737|出于几个原因，这对我来说真的很糟糕。最烦人的是，用户的第一反应是按退格键删除最后一个字符，但却被提示离开页面，因为退格键是在输入控件之外单击的。|1491738|我发现下面的变通方法对我来说效果很好：|1491739|jqueryFocus+=+$.fn.focus;
$.fn.focus+=+function+(delay,+fn)+{
++jqueryFocus.apply(this.filter(':not(.ui-dialog)'),+arguments);
};|1491740|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/1202501/80002^0|1A|6|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@$A|Z|B|10|1|11]]|C|$]]|$1|D|3|E|5|F|7|12|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|13|8|@]|9|@]|C|$]]|$1|K|3|L|5|6|7|14|8|@]|9|@]|C|$]]|$1|M|3|N|5|6|7|15|8|@]|9|@]|C|$]]|$1|O|3|P|5|F|7|16|8|@]|9|@]|C|$G|H]]|$1|Q|3|-4|5|6|7|17|8|@]|9|@]|C|$]]]|R|$S|$5|T|U|V|C|$W|X]]]]

I have a similar problem. I open an error dialog when validation fails and it grabs the focus, just like Flugan shows it in his <a href="https://stackoverflow.com/a/1202501/80002">answer</a>. The problem is that even if no element inside the dialog is tabbable, the dialog itself is still focused. Here is the original unminified code from jquery-ui-1.8.23\js\jquery.ui.dialog.js:

<pre><code>// set focus to the first tabbable element in the content area or the first button
// if there are no tabbable elements, set focus on the dialog itself
$(self.element.find(':tabbable').get().concat(
 uiDialog.find('.ui-dialog-buttonpane :tabbable').get().concat(
 uiDialog.get()))).eq(0).focus();
</code></pre>

The comment is theirs!

This is really bad for me for several reasons. The most annoying thing is that the first reaction of the user is to hit the backspace to delete the last character, but instead (s)he is prompted to leave the page, because the backspace is hit outside an input control.

I found that the following workaround works pretty good for me:

<pre><code>jqueryFocus = $.fn.focus;
$.fn.focus = function (delay, fn) {
 jqueryFocus.apply(this.filter(':not(.ui-dialog)'), arguments);
};
</code></pre>

blocks|key|1491796|text|jQuery+1.9已发布，似乎没有修复程序。在1.9中，通过某些建议的方法尝试阻止第一个文本框的焦点是不起作用的。我想是因为方法试图模糊焦点或移动焦点发生在对话框中的文本框已经获得焦点并完成了它的肮脏工作之后。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1491797|我在API文档中看不到任何让我认为在预期功能方面发生了变化的内容。关闭以添加打开按钮...|1491798|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

jQuery 1.9 is released and there does not appear to be a fix. Attempting to prevent focus of the first text box by some of the suggested methods is not working in 1.9. I think beccause the methods attempt to blur focus or move focus occur AFTER the text box in the dialog has already gained focus and done its dirty work.

I can't see anything in the API documentation that makes me think that anything has changed in terms of expected functionality. Off to add an opener button...

blocks|key|1491857|text|这是我通过jQuery+UI+ticket+#4731阅读后实现的解决方案，最初是由slolife发布的，作为对另一个答案的回应。(票证也是由他创建的。)|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1491858|首先，无论您使用哪种方法将自动完成应用于页面，都要添加以下代码行：|1491859|$.ui.dialog.prototype._focusTabbable+=+function(){};|code-block|syntax|javascript|1491860|这禁用了jQuery的“自动聚焦”行为。要确保您的站点继续具有广泛的可访问性，请包装您的对话框创建方法，以便可以添加其他代码，并添加一个调用以聚焦第一个输入元素：|1491861|function+openDialog(context)+{

++++//+Open+your+dialog+here

++++//+Usability+for+screen+readers.++Focus+on+an+element+so+that+screen+readers+report+it.
++++$("input:first",+$(context)).focus();

}|1491862|为了进一步解决通过键盘选择自动完成选项时的可访问性，我们覆盖了jQuery+UI的"select“自动完成回调，并添加了一些额外的代码，以确保textElement在进行选择后不会在IE+8中失去焦点。|1491863|下面是我们用来对元素应用自动补全的代码：|1491864|$.fn.applyAutocomplete+=+function+()+{

++++//+Prevents+jQuery+dialog+from+auto-focusing+on+the+first+tabbable+element.
++++//+Make+sure+to+wrap+your+dialog+opens+and+focus+on+the+first+input+element
++++//+for+screen+readers.
++++$.ui.dialog.prototype._focusTabbable+=+function+()+{+};

++++$(".autocomplete",+this)
++++++++.each(function+(index)+{

++++++++++++var+textElement+=+this;

++++++++++++var+onSelect+=+$(this).autocomplete("option",+"select");
++++++++++++$(this).autocomplete("option",+{
++++++++++++++++select:+function+(event,+ui)+{
++++++++++++++++++++//+Call+the+original+functionality+first
++++++++++++++++++++onSelect(event,+ui);

++++++++++++++++++++//+We+replace+a+lot+of+content+via+AJAX+in+our+project.
++++++++++++++++++++//+This+ensures+proper+copying+of+values+if+the+original+element+which+jQuery+UI+pointed+to
++++++++++++++++++++//+is+replaced.
++++++++++++++++++++var+$hiddenValueElement+=+$("#"+%2B+$(textElement).attr('data-jqui-acomp-hiddenvalue'));
++++++++++++++++++++if+($hiddenValueElement.attr("value")+!=+ui.item.value)+{
++++++++++++++++++++++++$hiddenValueElement.attr("value",+ui.item.value);
++++++++++++++++++++}

++++++++++++++++++++//+Replace+text+element+value+with+that+indicated+by+"display"+if+any
++++++++++++++++++++if+(ui.item.display)
++++++++++++++++++++++++textElement.value+=+ui.item.display;

++++++++++++++++++++//+For+usability+purposes.++When+using+the+keyboard+to+select+from+an+autocomplete,+this+returns+focus+to+the+textElement.
++++++++++++++++++++$(textElement).focus();

++++++++++++++++++++if+(ui.item.display)
++++++++++++++++++++++++return+false;

++++++++++++++++}
++++++++++++});
++++++++})
++++++++//+Set/clear+data+flag+that+can+be+checked,+if+necessary,+to+determine+whether+list+is+currently+dropped+down
++++++++.on("autocompleteopen",+function+(event,+ui)+{
++++++++++++$(event.target).data().autocompleteIsDroppedDown+=+true;
++++++++})
++++++++.on("autocompleteclose",+function+(event,+ui)+{
++++++++++++$(event.target).data().autocompleteIsDroppedDown+=+false;
++++++++});

++++return+this;
}|1491865|entityMap|0|LINK|mutability|MUTABLE|url|http://bugs.jqueryui.com/ticket/4731^0|5|M|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@$A|13|B|14|1|15]]|C|$]]|$1|D|3|E|5|6|7|16|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|17|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|18|8|@]|9|@]|C|$]]|$1|M|3|N|5|H|7|19|8|@]|9|@]|C|$I|J]]|$1|O|3|P|5|6|7|1A|8|@]|9|@]|C|$]]|$1|Q|3|R|5|6|7|1B|8|@]|9|@]|C|$]]|$1|S|3|T|5|H|7|1C|8|@]|9|@]|C|$I|J]]|$1|U|3|-4|5|6|7|1D|8|@]|9|@]|C|$]]]|V|$W|$5|X|Y|Z|C|$10|11]]]]

Here is the solution I implemented after reading through <a href="http://bugs.jqueryui.com/ticket/4731" rel="nofollow">jQuery UI ticket #4731</a>, originally posted by slolife as a response to another answer. (The ticket was also created by him.)

First, in whatever method you use to apply autocompletes to the page, add the following line of code:

<pre><code>$.ui.dialog.prototype._focusTabbable = function(){};
</code></pre>

That disables jQuery's "auto-focus" behavior. To ensure that your site continues to be broadly accessible, wrap your dialog creation methods so that additional code can be added, and add a call to focus the first input element:

<pre><code>function openDialog(context) {

 // Open your dialog here

 // Usability for screen readers. Focus on an element so that screen readers report it.
 $("input:first", $(context)).focus();

}
</code></pre>

To further address accessibility when autocomplete options are selected via keyboard, we override jQuery UI's "select" autocomplete callback and add some additional code to ensure the textElement does not lose focus in IE 8 after making a selection.

Here is the code we use to apply autocompletes to elements:

<pre><code>$.fn.applyAutocomplete = function () {

 // Prevents jQuery dialog from auto-focusing on the first tabbable element.
 // Make sure to wrap your dialog opens and focus on the first input element
 // for screen readers.
 $.ui.dialog.prototype._focusTabbable = function () { };

 $(".autocomplete", this)
 .each(function (index) {

 var textElement = this;

 var onSelect = $(this).autocomplete("option", "select");
 $(this).autocomplete("option", {
 select: function (event, ui) {
 // Call the original functionality first
 onSelect(event, ui);

 // We replace a lot of content via AJAX in our project.
 // This ensures proper copying of values if the original element which jQuery UI pointed to
 // is replaced.
 var $hiddenValueElement = $("#" + $(textElement).attr('data-jqui-acomp-hiddenvalue'));
 if ($hiddenValueElement.attr("value") != ui.item.value) {
 $hiddenValueElement.attr("value", ui.item.value);
 }

 // Replace text element value with that indicated by "display" if any
 if (ui.item.display)
 textElement.value = ui.item.display;

 // For usability purposes. When using the keyboard to select from an autocomplete, this returns focus to the textElement.
 $(textElement).focus();

 if (ui.item.display)
 return false;

 }
 });
 })
 // Set/clear data flag that can be checked, if necessary, to determine whether list is currently dropped down
 .on("autocompleteopen", function (event, ui) {
 $(event.target).data().autocompleteIsDroppedDown = true;
 })
 .on("autocompleteclose", function (event, ui) {
 $(event.target).data().autocompleteIsDroppedDown = false;
 });

 return this;
}
</code></pre>

blocks|key|1491917|text|作为第一个输入：<input+type="text"+style="position:absolute;top:-200px"+/>|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1491918|entityMap^0|8|1M|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

as first input : <code>&lt;input type="text" style="position:absolute;top:-200px" /&gt;</code>

blocks|key|1491963|text|我也遇到过类似的问题。在我的页面上，首先输入的是带有jQuery+UI日历的文本框。第二个元素是button。由于date已经有了值，所以我设置了focus+on按钮，但首先在文本框中添加模糊触发器。这解决了所有浏览器中的问题，可能在所有版本的jQuery中。在版本1.8.2中进行了测试。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1491964|<div+style="padding-bottom:+30px;+height:+40px;+width:+100%25;">
@using+(Html.BeginForm("Statistics",+"Admin",+FormMethod.Post,+new+{+id+=+"FormStatistics"+}))
{
++++<label+style="float:+left;">@Translation.StatisticsChooseDate</label>
++++@Html.TextBoxFor(m+=>+m.SelectDate,+new+{+@class+=+"js-date-time",++@tabindex=1+})
++++<input+class="button+gray-button+button-large+button-left-margin+text-bold"+style="position:relative;+top:-5px;"+type="submit"+id="ButtonStatisticsSearchTrips"+value="@Translation.StatisticsSearchTrips"++tabindex="2"/>
}|code-block|syntax|javascript|1491965|​|1491966|<script+type="text/javascript">
$(document).ready(function+()+{++++++++
++++$("#SelectDate").blur(function+()+{
++++++++$("#SelectDate").datepicker("hide");
++++});
++++$("#ButtonStatisticsSearchTrips").focus();

});+++|1491967|1491968|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|O|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|P|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|Q|8|@]|9|@]|A|$E|F]]|$1|K|3|H|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

I had similar problem.
On my page first input is text box with jQuery UI calendar.
Second element is button.
As date already have value, I set focus on button, but first add trigger for blur on text box. This solve problem in all browsers and probably in all version of jQuery. Tested in version 1.8.2.

<pre><code>&lt;div style="padding-bottom: 30px; height: 40px; width: 100%;"&gt;
@using (Html.BeginForm("Statistics", "Admin", FormMethod.Post, new { id = "FormStatistics" }))
{
 &lt;label style="float: left;"&gt;@Translation.StatisticsChooseDate&lt;/label&gt;
 @Html.TextBoxFor(m =&gt; m.SelectDate, new { @class = "js-date-time", @tabindex=1 })
 &lt;input class="button gray-button button-large button-left-margin text-bold" style="position:relative; top:-5px;" type="submit" id="ButtonStatisticsSearchTrips" value="@Translation.StatisticsSearchTrips" tabindex="2"/&gt;
}
</code></pre>



<pre><code>&lt;script type="text/javascript"&gt;
$(document).ready(function () { 
 $("#SelectDate").blur(function () {
 $("#SelectDate").datepicker("hide");
 });
 $("#ButtonStatisticsSearchTrips").focus();

}); 
</code></pre>

blocks|key|1492042|text|这对于智能手机和平板电脑来说非常重要，因为当输入具有焦点时，键盘就会出现。这就是我所做的，在div的开头添加以下输入：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1492043|<input+type="image"+width="1px"+height="1px"/>|code-block|syntax|javascript|1492044|不适用于大小为0px的。我想用一个真正透明的图片会更好，不管是.png还是.gif，但我还没试过。|offset|length|style|CODE|1492045|到目前为止，在iPad中工作得很好。|1492046|entityMap^0|0|0|7|3|V|4|11|4|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@$I|T|J|U|K|L]|$I|V|J|W|K|L]|$I|X|J|Y|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|Z|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|10|8|@]|9|@]|A|$]]]|P|$]]

This is really important for smartphones and tablets because the keyboard comes up when an input has the focus. This is what I've done, add this input at the beginning of the div:

<pre><code>&lt;input type="image" width="1px" height="1px"/&gt;
</code></pre>

Doesn't work with size <code>0px</code>. I guess it's even better with a real transparent image, either <code>.png</code> or <code>.gif</code> but I haven't tried.

Working fine so far in iPad.

blocks|key|1277199|text|如果您使用的是对话框按钮，只需在其中一个按钮上设置autofocus属性：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1277200|​|1277201|$('#dialog').dialog({
++buttons:+[
++++{
++++++text:+'OK',
++++++autofocus:+'autofocus'
++++},
++++{
++++++text:+'Cancel'
++++}
++]
});|code-block|syntax|javascript|1277202|<script+src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script+src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<link+href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"+rel="stylesheet"/>

<div+id="dialog"+title="Basic+dialog">
++This+is+some+text.
++ 
++<a+href="www.google.com">This+is+a+link.</a>
++ 
++<input+value="This+is+a+textbox.">
</div>|1277203|1277204|entityMap^0|P|9|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|U|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|V|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|W|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|X|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|Q|$]]

If you're using dialog buttons, just set the <code>autofocus</code> attribute on one of the buttons:

<div class="snippet" data-lang="js" data-hide="false" data-console="true">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$('#dialog').dialog({
 buttons: [
 {
 text: 'OK',
 autofocus: 'autofocus'
 },
 {
 text: 'Cancel'
 }
 ]
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://code.jquery.com/jquery-1.12.4.min.js"&gt;&lt;/script&gt;
&lt;script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"&gt;&lt;/script&gt;
&lt;link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/&gt;

&lt;div id="dialog" title="Basic dialog"&gt;
 This is some text.
 &lt;br/&gt;
 &lt;a href="www.google.com"&gt;This is a link.&lt;/a&gt;
 &lt;br/&gt;
 &lt;input value="This is a textbox."&gt;
&lt;/div&gt;</code></pre>
</div>
</div>

blocks|key|1277258|text|您可以提供此选项，以使关闭按钮成为焦点。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1277259|.dialog({
++++++open:+function+()+{
++++++++++++++$(".ui-dialog-titlebar-close").focus();
++++++++++++}
+++});|code-block|syntax|javascript|1277260|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You may provide this option, to focus the close button instead.

<pre><code>.dialog({
 open: function () {
 $(".ui-dialog-titlebar-close").focus();
 }
 });
</code></pre>

I have setup a jQuery UI modal dialog to display when a user clicks a link. There are two textboxes (I only show the code for 1 for brevity) in that dialog div tag and it is changed to be a jQuery UI DatePicker textbox that reacts on focus.

The problem is that the jQuery UI dialog('open') somehow triggers the first textbox to have focus, which then triggers the datepicker calendar to open immediately.

So I am looking for a way to prevent the focus from happening automatically.

<pre class="lang-html prettyprint-override"><code>&lt;div&gt;&lt;a id="lnkAddReservation" href="#"&gt;Add reservation&lt;/a&gt;&lt;/div&gt;

&lt;div id="divNewReservation" style="display:none" title="Add reservation"&gt;
 &lt;table&gt;
 &lt;tr&gt;
 &lt;th&gt;&lt;asp:Label AssociatedControlID="txtStartDate" runat="server" Text="Start date" /&gt;&lt;/th&gt;
 &lt;td&gt;
 &lt;asp:TextBox ID="txtStartDate" runat="server" CssClass="datepicker" /&gt;
 &lt;/td&gt;
 &lt;/tr&gt;
 &lt;/table&gt;

 &lt;div&gt;
 &lt;asp:Button ID="btnAddReservation" runat="server" OnClick="btnAddReservation_Click" Text="Add reservation" /&gt;
 &lt;/div&gt;
&lt;/div&gt;

&lt;script type="text/javascript"&gt;
 $(document).ready(function() {
 var dlg = $('#divNewReservation');
 $('.datepicker').datepicker({ duration: '' });
 dlg.dialog({ autoOpen:false, modal: true, width:400 });
 $('#lnkAddReservation').click(function() { dlg.dialog('open'); return false; });
 dlg.parent().appendTo(jQuery("form:first"));
 });
&lt;/script&gt;
</code></pre>

Prevent jQuery UI dialog from setting focus to first textbox

容器

jQuery

我已经设置了一个jQuery UI模式对话框来在用户单击链接时显示。在该对话框的div标记中有两个文本框(为简洁起见，我只显示了1的代码)，并且它被更改为对焦点做出反应的jQuery UI DatePicker文本框。问题是datepicker UI对话框(‘打开’)以某种方式触发第一个文本框具有焦点，然后触发jQue...

问阻止jQuery UI对话框将焦点设置到第一个文本框
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问阻止jQuery UI对话框将焦点设置到第一个文本框EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问阻止jQuery UI对话框将焦点设置到第一个文本框
EN