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

我已经设置了一个jQuery UI模式对话框，以在用户单击链接时显示。在该对话框div标签中有两个文本框（为简洁起见，我仅显示1的代码），并将其更改为对焦点有反应的jQuery UI DatePicker文本框。

问题在于，jQuery UI对话框（“ open”）以某种方式触发了第一个文本框以使其具有焦点，然后触发了日期选择器日历以立即打开。

因此，我正在寻找一种方法来防止焦点自动发生。

<div><a id="lnkAddReservation" href="#">Add reservation</a></div>

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

    <div>
        <asp:Button ID="btnAddReservation" runat="server" OnClick="btnAddReservation_Click" Text="Add reservation" />
    </div>
</div>

<script type="text/javascript">
    $(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"));
    });
</script>

jQuery UI 1.10.0 Changelog将故障单4731列出为已修复。

看起来好像没有实现focusSelector，而是使用了对各种元素的级联搜索。从票：

扩展自动对焦，从[自动对焦]开始，然后是：可粘贴的内容，然后是按钮窗格，然后是关闭按钮，然后是对话框

因此，用autofocus属性标记一个元素，该元素应成为焦点：

<input autofocus>

在文档中，对焦点逻辑进行了说明（在目录下，标题为“焦点”）：

打开对话框后，焦点将自动移至与以下内容匹配的第一项：

1. 对话框中具有autofocus属性的第一个元素
2. :tabbable对话框内容中的第一个元素
3. :tabbable对话框按钮窗格中的第一个元素
4. 对话框的关闭按钮
5. 对话框本身

在其上方添加一个隐藏范围，使用ui-helper-hidden-accessible使其通过绝对定位隐藏。我知道您有该课程，因为您使用的是来自jquery-ui的对话框，它位于jquery-ui中。

<span class="ui-helper-hidden-accessible"><input type="text"/></span>

在jQuery UI> = 1.10.2中，您可以用_focusTabbable安慰剂函数替换prototype方法：

$.ui.dialog.prototype._focusTabbable = $.noop;

小提琴

这将影响dialog页面中的所有，而无需手动进行编辑。

原始函数除了将焦点设置为具有autofocus属性/ tabbableelement / 的第一个元素，或者回退到对话框本身之外，什么也不做。因为它的使用只是将重点放在某个元素上，所以用替换它应该没有问题noop。

从jQuery UI 1.10.0开始，您可以使用HTML5属性 autofocus选择要关注的输入元素。

您所要做的就是创建一个虚拟元素作为对话框中的第一个输入。它将为您吸收焦点。

<input type="hidden" autofocus="autofocus" />

此功能已于2013年2月7日在Chrome，Firefox和Internet Explorer（所有最新版本）中进行测试。

http://jqueryui.com/upgrade-guide/1.10/#added-ability-to-specify-which-element-to-focus-on-open

我发现下面的代码可以打开jQuery UI对话框。

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

您可以解决jQuery行为或更改行为。

tabindex -1可以作为解决方法。

只是在玩耍时弄清楚了这一点。

我发现这些解决方案可以消除焦点，导致该ESC键在首次进入对话框时停止工作（即关闭对话框）。

如果对话框打开并且您立即按ESC，则它不会关闭对话框（如果您已启用该对话框），因为焦点位于某个隐藏字段或某些内容上，并且没有按键事件。

我解决问题的方法是将其添加到open事件中，以将焦点从第一个字段中移除：

$('#myDialog').dialog({
    open: function(event,ui) {
        $(this).parent().focus();
    }
});

这会将焦点设置到对话框（该对话框不可见）上，然后该ESC键起作用。

将输入的tabindex设置为-1，然后设置dialog.open以在以后需要时恢复tabindex：

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

我的解决方法：

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

我的内容比对话框长。在打开时，对话框将与底部的第一个：tabbable冲突。这是我的解决办法。

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

简单的解决方法：

只需创建一个带有tabindex = 1的不可见元素...这将不会使datepicker聚焦...

例如。：

<a href="" tabindex="1"></a>
...
Here comes the input element

这是我通过阅读jQuery UI Ticket＃4731后实现的解决方案最初由slolife发布，作为对另一个答案的回应。（该票也是由他创建的。）

首先，以任何用于将自动完成功能应用于页面的方法，添加以下代码行：

$.ui.dialog.prototype._focusTabbable = function(){};

这将禁用jQuery的“自动对焦”行为。为确保您的站点继续可以广泛访问，请包装对话框创建方法，以便可以添加其他代码，并添加一个调用来聚焦第一个输入元素：

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();

}

为了在通过键盘选择自动完成选项时进一步解决可访问性，我们重写了jQuery UI的“选择”自动完成回调，并添加了一些其他代码来确保textElement在选择后不会在IE 8中失去焦点。

这是我们用于将自动完成功能应用于元素的代码：

$.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;
}

您可以提供此选项，而不是聚焦关闭按钮。

.dialog({
      open: function () {
              $(".ui-dialog-titlebar-close").focus();
            }
   });

这可能是浏览器行为，而不是jQuery插件问题。您是否尝试过在打开弹出窗口后以编程方式删除焦点。

$('#lnkAddReservation').click(function () {
    dlg.dialog('open');

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

    return false;
});

尚未测试，但应该可以。

我遇到了同样的问题，并通过在datepicker之前插入一个空输入来解决它，每次打开对话框时，该输入都会窃取焦点。该输入在对话框的每次打开时都隐藏，并在关闭时再次显示。

好吧，很酷的是暂时没人找到解决方案，但是看来我有适合您的解决方案。坏消息是，即使内部没有输入和链接，对话框在任何情况下都可以吸引焦点。我将对话框用作工具提示，并且绝对需要将重点放在原始元素上。这是我的解决方案：

使用选项[autoOpen：false]

$toolTip.dialog("widget").css("visibility", "hidden"); 
$toolTip.dialog("open");
$toolTip.dialog("widget").css("visibility", "visible");

当对话框不可见时，焦点不会设置在任何地方，而是停留在原始位置。它仅适用于纯文本的工具提示，但并未经过更多功能性对话框的测试，这些对话框在打开时刻可见对话框可能很重要。在任何情况下都可能会正常工作。

我知道原始文章只是为了避免将注意力集中在第一个元素上，但是您可以轻松地确定在打开对话框后（在我的代码之后）应将焦点放在哪里。

经过IE，FF和Chrome测试。

希望这会对某人有所帮助。

我认为这种解决方案非常好：

$("#dialog").dialog({
    open: function(event, ui) {
        $("input").blur();
    }
});

在此处找到：无法删除用户界面中的自动对焦

我有一个类似的问题。验证失败时，我打开一个错误对话框，它抓住了焦点，就像Flugan在他的答案中显示的那样。问题在于，即使对话框中没有任何元素是可Tabable的，对话框本身仍然是焦点。这是来自jquery-ui-1.8.23 \ js \ jquery.ui.dialog.js的原始未缩小代码：

// 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();

评论是他们的！

这对我来说真的很糟糕，原因有几个。最烦人的是，用户的第一个反应是按下退格键以删除最后一个字符，但是由于退格键是在输入控件之外点击的，因此提示用户离开页面。

我发现以下变通办法对我来说非常有效：

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

我正在寻找其他问题，但原因相同。问题是对话框将焦点设置为第一个<a href="">.</a>它找到。因此，如果对话框中有很多文本并且出现滚动条，则可能会出现滚动条滚动到底部的情况。我相信这也解决了第一人称的问题。尽管其他人也是如此。

简单易懂的修复程序。 <a id="someid" href="#">.</a> 作为对话框div中的第一行。

例：

 <div id="dialogdiv" title="some title">
    <a id="someid" href="#">.</a>
    <p>
        //the rest of your stuff
    </p>
</div>

发起对话的位置

$(somediv).dialog({
        modal: true,
        open: function () { $("#someid").hide(); otherstuff or function },
        close: function () { $("#someid").show(); otherstuff or function }
    });

上面没有任何内容，滚动条将保留在其所属的顶部。在<a>获得焦点，但然后隐藏。因此，总体效果是所需的效果。

我知道这是一个旧线程，但是就UI文档而言，对此没有修复。这不需要模糊或聚焦即可工作。不知道这是否是最优雅的。但这对任何人都有意义且易于解释。

如果您只有一个字段以Jquery对话框的形式出现，并且它是需要Datepicker的字段，或者，您可以仅将焦点设置在对话框标题栏中的对话框“ 关闭（交叉）”按钮上：

$('.ui-dialog-titlebar-close').focus();

对话框初始化后调用此方法，例如：

$('#yourDialogId').dialog();
$('.ui-dialog-titlebar-close').focus();

因为关闭按钮是在.dialog()调用后呈现的。

如果您使用对话框按钮，只需autofocus在按钮之一上设置属性：

$('#dialog').dialog({
  buttons: [
    {
      text: 'OK',
      autofocus: 'autofocus'
    },
    {
      text: 'Cancel'
    }
  ]
});

<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.
  <br/>
  <a href="www.google.com">This is a link.</a>
  <br/>
  <input value="This is a textbox.">
</div>

我遇到了同样的问题。

我所做的解决方法是在对话框容器的顶部添加虚拟文本框。

<input type="text" style="width: 1px; height: 1px; border: 0px;" />

如前所述，这是jQuery UI的已知错误，应尽快修复。直到那时...

这是另一种选择，因此您不必弄乱tabindex：

暂时禁用日期选择器，直到对话框打开：

dialog.find(".datepicker").datepicker("disable");
dialog.dialog({
    "open": function() {$(this).find(".datepicker").datepicker("enable");},
});

为我工作。

重复的问题：如何在对话框打开时模糊第一个表单输入

要扩展先前的某些答案（并忽略辅助的日期选择器方面），如果要防止在focus()打开对话框时使事件集中在第一个输入字段上，请尝试以下操作：

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

我有一个类似的问题，并通过打开后专注于对话框来解决：

var $dialog = $("#pnlFiltros")
    .dialog({
        autoOpen: false,
        hide: "puff",                   
        width: dWidth,
        height: 'auto',
        draggable: true,
        resizable: true,
        closeOnScape : true,
        position: [x,y]                    
    });
$dialog.dialog('open');
$("#pnlFiltros").focus(); //focus on the div being dialogued (is that a word?)

但就我而言，第一个元素是锚点，因此我不知道您的情况是否会打开日期选择器。

编辑：仅适用于IE

在jquery.ui.js中找到

d.find(".ui-dialog-buttonpane :tabbable").get().concat(d.get()))).eq(0).focus(); 

并替换为

d.find(".ui-dialog-buttonpane :tabbable").get().concat(d.get()))).eq(-1).focus();

jQuery 1.9已发布，似乎没有修复。在1.9中，尝试通过某些建议的方法阻止第一个文本框成为焦点。我认为是因为该方法尝试使焦点模糊或移动焦点发生在对话框中的文本框已经获得焦点并完成其肮脏的工作之后。

我在API文档中看不到任何东西，使我认为就预期功能而言，一切都没有改变。单击关闭以添加打开按钮...

我有类似的问题。在我的页面上，第一个输入是带有jQuery UI日历的文本框。第二个元素是按钮。由于日期已经有价值，因此将重点放在按钮上，但首先在文本框中添加触发器以实现模糊。这可以解决所有浏览器以及可能所有版本的jQuery中的问题。在版本1.8.2中测试。

<div style="padding-bottom: 30px; height: 40px; width: 100%;">
@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"/>
}

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

});   

这对于智能手机和平板电脑确实非常重要，因为当输入具有焦点时键盘会抬起。这就是我所做的，在div的开头添加以下输入：

<input type="image" width="1px" height="1px"/>

不适用于尺寸0px。我想这是更好的一个真正的透明图像，无论是.png或.gif，但我没试过。

到目前为止，在iPad上运行良好。

您可以添加：

...

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

...

作为第一个输入： <input type="text" style="position:absolute;top:-200px" />