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

我已经设置了一个jQueryUI模式对话框，当用户单击链接时显示。对话框div标记中有两个文本框（为了简洁起见，我只显示了1的代码），它被更改为一个jQuery UI DatePicker文本框，在焦点上做出反应

问题是jQueryUI对话框（“open”）以某种方式触发第一个文本框以获得焦点，然后触发datepicker日历立即打开

所以我正在寻找一种方法来防止焦点自动发生

$（文档）.ready（函数（）{
var dlg=$（'divNewReservation'）；
$（'.datepicker'）.datepicker（{duration:'}）；
对话框（{autoOpen:false，modal:true，width:400}）；
$（'#lnkaddresservation'）。单击（函数（）{dlg.dialog（'open'）；返回false；}）；
dlg.parent（）.appendTo（jQuery（“form:first”）；
});

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

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

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

    return false;
});

---

尚未测试，但应正常工作。

将输入的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");
        }
    });
});

---

我在jQueryUI对话框函数中找到了以下代码

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是一种变通方法。

我的内容比对话框长。打开时，对话框将转到底部的第一个：tabbable。这是我的办法

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

您可以添加以下内容：

…

将列表列为已修复

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

扩展自动对焦，从[autofocus]开始，然后：选项卡内容，然后按钮平面，然后关闭按钮，然后对话框

因此，使用

autofocus

属性标记一个元素，该元素应该获得焦点：

<input autofocus>

在中，对焦点逻辑进行了解释（就在目录下，标题“焦点”下）：

打开对话框后，焦点将自动移动到第一个项目 符合以下条件：

对话框中具有

autofocus

属性的第一个元素

对话框内容中的第一个

：tabbable

元素

对话框按钮面板中的第一个

：tabable

元素

对话框的关闭按钮

对话本身

---

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

我遇到了同样的问题

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

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

我的解决方法：

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

---

如前所述，这是jQueryUI的一个已知错误，应该尽快修复。在那之前

这里还有另一个选项，这样您就不必处理tabindex了：

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

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

对我有用

重复问题：

简单解决方法：

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

只需创建一个tabindex=1的不可见元素。。。 这将不会集中于日期选择器

例如：

...
这里是输入元素

要展开前面的一些答案（并忽略辅助日期选择器方面），如果要防止

focus（）

事件在对话框打开时聚焦第一个输入字段，请尝试以下操作：

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

---

嗯，现在还没有人找到解决方案，这很酷，但看起来我有东西要给你。坏消息是，对话框在任何情况下都会抓住焦点，即使里面没有输入和链接。 我使用对话框作为工具提示，并且肯定需要将焦点保持在原始元素中。以下是我的解决方案：

使用选项[自动打开：错误]

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

当对话框不可见时，焦点不会设置在任何位置，并保持在原始位置。 它只适用于纯文本的工具提示，但不适用于功能性更强的对话框，在这些对话框中，在打开时显示对话框可能很重要。在任何情况下都可能很好

我知道最初的帖子只是为了避免关注第一个元素，但是在打开对话框（在我的代码之后）后，您可以很容易地决定焦点应该在哪里

在IE、FF和Chrome中测试

---

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

我遇到了一个类似的问题，通过在打开后关注对话框解决了这个问题：

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

在其上方添加隐藏跨距，使用ui helper hidden Access使其通过绝对定位隐藏。我知道您有这个类，因为您使用的是来自jQueryUI的对话框，它位于jQueryUI中

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

---

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

并替换为

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

---

在我看来，这个解决方案非常好：

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

---

在这里找到：

我也有类似的问题。当验证失败时，我打开一个错误对话框，它抓住了焦点，就像Flugan在他的文章中显示的那样。问题是，即使对话框中没有可标记的元素，对话框本身仍然是聚焦的。以下是来自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();

评论是他们的

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

我发现下面的解决方法在

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

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

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

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

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

}

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

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

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

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

});   

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

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

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