Javascript jquery ui对话框：使对话框中的按钮成为默认操作（输入键）

在jquery模式对话框中，是否有方法选择一个按钮作为默认操作（当用户按下enter键时执行的操作）

jquery网站示例：

在上面的示例中，当用户按下Esc键时，对话框关闭。我希望在用户按Enter键时调用“Ok”按钮操作。

应该可以让您到达您想要的位置：

$('#DialogTag').keyup(function(e) {
    if (e.keyCode == 13) {
        //Close dialog and/or submit here...
    }
});

---

在对话框的“打开”功能中，可以聚焦按钮：

$("#myDialog").dialog({
    open: function() {
      $(this).parents('.ui-dialog-buttonpane button:eq(0)').focus(); 
    }
});

更改

：eq（0）

如果它位于不同的索引，或按名称查找等。

尝试以下方法：

$("#myDialog").dialog({
    open: function() {
         $(this).siblings('.ui-dialog-buttonpane').find('button:eq(1)').focus(); 
    }
});

我喜欢这个（它对我有用），它将焦点放在我想要的地方（一个文本框）

但是，这仅适用于一个按钮（Ok按钮），如果需要，可以将“：eq（n）”设置为选择其他按钮

---

注意：我添加了一个返回false的新行，以防止在处理enter键时事件冒泡，我希望它比以前更有用。

最简单的方法是在对话框中的表单上使用submit操作，但是：

• 我不想在对话框中要求表单（注意，不同的浏览器对enter键的处理方式不同，有些浏览器并不总是在enter时提交）
• 如果用户在按enter键之前单击标题窗格或按钮窗格，我希望此功能能够正常工作
• 我想做一个库方法，我可以用于任何 jQueryUI对话框

我工作的公司是“EBL”，我避免在全球范围内工作……因此在以下功能上使用前缀：

EBL.onUiDialogOpen = function (event, ui, hideX, actionFirstButtonOnEnterKey) {

    if (hideX) {
        // There is no option to hide the 'X' so override.
        $(".ui-dialog-titlebar-close").hide();
    }

    if (actionFirstButtonOnEnterKey) {
        /* (event.target) will give the div that will become the content 
        of a UI dialog, once div is 'opened' is it surrounded by a 
        parent div that contains title and buttonpane divs as well as 
        content div - so I use .parent()

        ...The keyup function is binded to all descendants, therefore:
              -We need the e.stopPropagation() line.
              -This code is NOT what you want if you DON'T want enter 
               key to initiate first button regardless of selected control.
        */
        $(event.target).parent().bind('keydown.justWhileOpen', function (e) {
            if (e.keyCode === $.ui.keyCode.ENTER) {
                e.stopPropagation();
                $(event.target).next('.ui-dialog-buttonpane')
                    .find('button:first').click();
            }
        });
    }
};

…与以下各项结合使用：

EBL.onUiDialogClose = function (event, ui) {
    // Remove keyup handler when we close dialog
    $(event.target).parent().unbind('.justWhileOpen');
};

如果正在使用动态创建的div并在以后销毁它，则不需要.onUiDialogClose

您可以在下面看到我在初始化非动态对话框时如何使用这些库函数

$('#divName').dialog({
    //...
    open: function (event, ui) { EBL.onUiDialogOpen(event, ui, false, true); },
    close: function (event, ui) { EBL.onUiDialogClose(event, ui); },
    //...
});

到目前为止，我已经在IE9和最新的chrome/firefox中对此进行了测试。

---

您应该在“确定”功能中验证必要的对话框。

使用按钮名称作为选择器的细微变化。它读起来稍微好一点，但是按钮文本字符串有明显的重复。根据口味进行重构

$("#confirm-dialog").dialog({
    buttons: {
        "Cancel" : function(){},
        "OK" : function(){}
    },
    open: function() {
        $(this).siblings('.ui-dialog-buttonpane').find("button:contains('OK')").focus(); 
    }
});

---

我使用的是1.10.0版。我无法让它以开放而专注的方式工作。这将关注第二个按钮：

focus: function(){
  $(this).siblings('.ui-dialog-buttonpane').find('button:eq(1)').focus();
}

---

另一个使您能够更好地控制对话框中所有按钮的选项是将它们添加为按钮数组。然后在打开事件中您可以通过id获取按钮并执行任何您想要的操作（包括设置焦点）

---

这段简单的代码为按钮设置样式，并将默认设置为最后一个：

 open: function(){

      $buttonPane = $(this).next();
      $buttonPane.find('button:first').addClass('accept').addClass('ui-priority-secondary');
      $buttonPane.find('button:last').addClass('cancel').addClass('ui-state-default');
      $buttonPane.find('button:last').focus();

  },

---

这在使用jQuery1.10.2的对话框中对我很有效

dialog({
    focus: function() {
        $(this).on("keyup", function(e) {
            if (e.keyCode === 13) {
                $(this).parent().find("button:eq(1)").trigger("click");
                return false;
            }
        });
    },

---

更多选项…

在我的例子中，没有一个答案有效，因为我在一个空div上调用了

.dialog

，并动态添加了我的按钮，

$（this）.html（）

将不返回任何内容。因此，我不能调用像

parent（）

或

sibbines（）

这样的方法并期望得到某种回报。我所做的是直接选择

ui对话框buttonpane

类，然后从中找到button元素

HTML

---

我知道这是一个旧的线程，但我一直在寻找这个确切的功能，并能够实现我认为是最好的解决方案，因为我发现以上所有这些都有一点不足

这是上面两个答案的组合。对我来说，使用ID而不是依赖find（）函数来查找button元素似乎总是一个更好的选择

如果需要的话，还可以显式地查找要按下的enter键，以便在打开对话框时将焦点设置为所需的任何元素。这似乎是为了在满足在按下enter键时将特定按钮作为“默认”触发的愿望的同时实现最大的灵活性。我还实现了一个“取消”默认值

我希望这能帮助其他人为对话框寻找一个好的“默认”按钮解决方案

$("#LoginBox").dialog({
   open: function(){
      $(this).keydown(function (event) {
         if (event.keyCode == 13) {
            $("#LogInButton").trigger("click");
            return false;
         }
         if (event.keyCode == 27) {
            $("#CancelButton").trigger("click");
            return false;
         }
      });
   },
   close: function(){
      $(this).dialog("destroy");
   },
   buttons: [
      {
         id: "LogInButton",
         text: "Log In",
         click: function(){
            //button functionality goes here
            $(this).dialog("destroy");
         }
      },
      {
         id: "CancelButton",
         text: "Cancel",
         click: function(){
            $(this).dialog("destroy");
         }
      }
   ]
});

---

您应该使用：选项卡选择器和按钮索引（0是[X]按钮，您的按钮从1开始）

---

我刚刚用$（this.parent（）.find（'button:nth child（1）'）.focus（）编写了代码；这是相似的。谢谢，我确实打开了：

function（）{$（this）.parent（）.find（'.ui对话框按钮pane按钮：eq（1）'））.focus（）；}。

我认为这个方法在jQuery ui的新版本上不起作用。对话框的DOM现在似乎将div.ui-dialog-buttonpane作为同级，而不是$（this）的父级。看看下面马杜兹的答案。zesc的答案将包括对话框的标题栏“x”。Gabriel的答案与madeuz的基本相同，只是遍历有点不同。任何使用keycode 13事件处理程序的答案都比这好，因为这只在只有按钮的情况下有效。如果您希望将焦点设置为与默认按钮不同的控件，则此选项无效。Darren的答案使用带有提交操作的表单可能也是一个更好的答案。我发现它有效，但设置焦点与默认按钮不同。如果div中有其他控件，则一旦选择这些控件，按钮将不再具有焦点？确实需要按键事件吗？在发布此问题之前，我没有找到问题。这几乎是同一个问题。谢谢你指出这一点。我试图让这段代码正常工作，但没有取得多大成功。我尝试下载最新版本的jqueryui并将此代码添加到示例（index.html），但没有成功。这似乎与较新版本的jqueryui（在1.9.2中测试）创建的DOM相匹配。检查一个不涉及：eq（x）的模式，我相信这在jQueryUI的任何版本中都会起作用：$（this）.parents（'.UI dialog'）.find（'.UI dialog buttonpane button:eq（0））。这在jQueryUI1.10中也适用。被接受的答案是否定的。这是一条路要走。设置焦点（如其他解决方案中所示）会让超级用户陷入困境，他们使用tab键进入其他字段，但仍然希望在任何地方按“回车”键

$("#logonDialog").keydown(function (event) {if (event.keyCode == 13) {
        $(this).parent().find("button:eq(0)").trigger("click");
        return false;
    }
});

dialog({
    focus: function() {
        $(this).on("keyup", function(e) {
            if (e.keyCode === 13) {
                $(this).parent().find("button:eq(1)").trigger("click");
                return false;
            }
        });
    },

<div id = "dialogexample">
</div>

$("#dialogexample").dialog({
    autoOpen: false,
    modal: true,
    open: function () {
        $('.ui-dialog-buttonpane').find('#otherbutton').focus();
    }
});
var buttons = {
    "MyButton" : {
        text: "Do Stuff",
        id: "dostuffbutton" 
    },
    "OtherButton" : {
        text: "Other Stuff",
        id: "otherbutton"
    }
} 
$("#dialogexample").dialog("option", "buttons", buttons);
$("#dialogexample").dialog("open"); //the second (otherbutton), instead of
                                    //the first (dostuffbutton) button should be focused

$("#LoginBox").dialog({
   open: function(){
      $(this).keydown(function (event) {
         if (event.keyCode == 13) {
            $("#LogInButton").trigger("click");
            return false;
         }
         if (event.keyCode == 27) {
            $("#CancelButton").trigger("click");
            return false;
         }
      });
   },
   close: function(){
      $(this).dialog("destroy");
   },
   buttons: [
      {
         id: "LogInButton",
         text: "Log In",
         click: function(){
            //button functionality goes here
            $(this).dialog("destroy");
         }
      },
      {
         id: "CancelButton",
         text: "Cancel",
         click: function(){
            $(this).dialog("destroy");
         }
      }
   ]
});

open: function() {
    var tb = $(":tabbable", this.parentNode);
    if(tb.length>1) {
        tb[1].focus();
    }
}