jQuery UI焦点窃取

每当我在下面的插入超链接文本输入中键入内容时，所有单词都将转到后面的textarea 。 确定和取消按钮工作正常，但我不能专注于文本输入。

我们正在使用jQuery UI 1.10.1。 它与之前版本的jQuery（1.8.x）运行良好。

我已经检查了jQuery背后的代码，并且在打开modal dialog时调用了以下方法：

 _focusTabbable: function () { // Set focus to the first match: // 1. First element inside the dialog matching [autofocus] // 2. Tabbable element inside the content element // 3. Tabbable element inside the buttonpane // 4. The close button // 5. The dialog itself var hasFocus = this.element.find("[autofocus]"); if (!hasFocus.length) { hasFocus = this.element.find(":tabbable"); } if (!hasFocus.length) { hasFocus = this.uiDialogButtonPane.find(":tabbable"); } if (!hasFocus.length) { hasFocus = this.uiDialogTitlebarClose.filter(":tabbable"); } if (!hasFocus.length) { hasFocus = this.uiDialog; } hasFocus.eq(0).focus(); }, _keepFocus: function (event) { function checkFocus() { var activeElement = this.document[0].activeElement, isActive = this.uiDialog[0] === activeElement || $.contains(this.uiDialog[0], activeElement); if (!isActive) { this._focusTabbable(); } } event.preventDefault(); checkFocus.call(this); // support: IE // IE <= 8 doesn't prevent moving focus even with event.preventDefault() // so we check again later this._delay(checkFocus); }, 

取自这里： http ： //code.jquery.com/ui/1.10.1/jquery-ui.js

Answer 1

第二个答案我发现在下面的代码中jQuery将文档绑定到对话框。 因此，当我点击所需按钮的onclick事件（或您正在处理的任何事件）时解除绑定：

  if (window.jQuery && window.jQuery.ui.dialog) { $(document).unbind("focusin.dialog"); } 

这是jQuery UI将_focusTabble()方法绑定到focusin.dialog事件的文件。

 if ( !$.ui.dialog.overlayInstances ) { // Prevent use of anchors and inputs. // We use a delay in case the overlay is created from an // event that we're going to be cancelling. (#2804) this._delay(function() { // Handle .dialog().dialog("close") (#4065) if ( $.ui.dialog.overlayInstances ) { this.document.bind( "focusin.dialog", function( event ) { if ( !$( event.target ).closest(".ui-dialog").length && // TODO: Remove hack when datepicker implements // the .ui-front logic (#8989) !$( event.target ).closest(".ui-datepicker").length ) { event.preventDefault(); $(".ui-dialog:visible:last .ui-dialog-content") .data("ui-dialog")._focusTabbable(); } }); } }); } 

Answer 2

我为解决这个问题所做的就是注释掉这个$(".ui-dialog:visible:last .ui-dialog-content").data("ui-dialog")._focusTabbable();

您可以在下面找到完整的代码：

  if ( !$.ui.dialog.overlayInstances ) { // Prevent use of anchors and inputs. // We use a delay in case the overlay is created from an // event that we're going to be cancelling. (#2804) this._delay(function() { // Handle .dialog().dialog("close") (#4065) if ( $.ui.dialog.overlayInstances ) { this.document.bind( "focusin.dialog", function( event ) { if ( !$( event.target ).closest(".ui-dialog").length && // TODO: Remove hack when datepicker implements // the .ui-front logic (#8989) !$( event.target ).closest(".ui-datepicker").length ) { event.preventDefault(); //$(".ui-dialog:visible:last .ui-dialog-content") //.data("ui-dialog")._focusTabbable(); } }); } }); } 

Answer 3

我有一个类似的问题，我需要把焦点放在我的对话框（WCAG）的内容中。 单独使用focus（）失败了，所以在我添加的对话框实例化中我的最终解决方案是什么：

 focus: function(event, ui) { setTimeout(function(){ $('#element').blur().focus().css({'color': '#000', 'text-decoration' : 'none', 'cursor' : 'default'}); }, 500); } 

我使用超时来确保兼容性。 *注意，我将’#element’作为锚标记（交互元素），因此需要重点关注。 这就是造型的原因。

此代码也应该能够添加到jQuery Dialog的“open”函数中。