Question

在jquery模式对话框中，有没有办法选择按钮作为默认操作（当用户按下回车时要执行的操作）？

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

Answer 1

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

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

更改:eq(0)，如果它位于不同的索引，或按名称查找等。

Answer 2

我喜欢这个（它适合我），它将焦点留在我想要的位置（文本框）

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

然而，这只适用于一个按钮（确定按钮），如果需要'：eq（n）'可以设置为选择其他按钮。

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

Answer 3

尝试这种方式：

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

Answer 4

This other stackoverflow question可以让你到达目的地：

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

Answer 5

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

$('#myDialog').dialog({
    buttons: [  
                {
                    id: "btnCancel",
                    text: "Cancel",
                    click: function(){
                        $(this).dialog('close');
                    }
                },
                {
                    id: "btnOne",
                    text: "Print One",
                    click: function () {
                        SomeFunction(1);
                    }
                },
                {
                    id: "btnTwo",
                    text: "Print Two",
                    click: function(){
                        SomeFunction(0);
                    }
                }
            ],
    open: function () {
        if ($('#hiddenBool').val() != 'True') {
            $('#btnOne').hide();
        }
        $("#btnTwo").focus();
    }
});

Answer 6

使用按钮名称作为选择器稍有不同。它看起来好一点，但按钮文本字符串明显重复。重构品味。

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

Answer 7

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

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

我工作的公司是EBL＆＃39;并且我避免全局范围...因此下面函数的前缀：

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中对此进行了测试。您应该在“＆＃39;确定”中验证对话框是否有必要。功能

Answer 8

我使用的是1.10.0版。我无法让它与开放但有重点的工作。这会聚焦第二个按钮：

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

Answer 9

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

Answer 10

这在我使用jquery 1.10.2

的对话框中对我有用

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

更多选择......

Answer 11

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

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

  },

Answer 12

在我的情况下，没有一个答案有效，因为我在空div上调用.dialog并添加了我的按钮动态，因此{{1}什么都不会回报。所以我无法调用像$(this).html()或parent()这样的方法，并期待回报。我所做的是直接选择siblings()类并从那里找到按钮元素

HTML

ui-dialog-buttonpane

Jquery的

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

Answer 13

我知道这是一个老线程，但我正在寻找这个确切的功能，并且能够实现我认为最好的解决方案，因为我发现所有上述内容都不尽如人意。

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

同样明确地查找要按下的回车键，允许我们根据需要将焦点设置为打开对话框时我们想要的任何元素。这似乎允许最大的灵活性，同时满足触发特定按钮的愿望，因为默认＆＃39;当按下回车键时。我还实施了取消＆＃39;默认也是。

我希望这可以帮助其他人寻找一个好的＆＃39;默认＆＃39;对话框的按钮解决方案。

$("#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");
         }
      }
   ]
});

Answer 14

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

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

jquery-ui对话框：在对话框中创建一个默认操作按钮（Enter键）

14 个答案: