jquery-ui对话框:在对话框中创建一个默认操作按钮(Enter键)

Question

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

jquery网站示例: jquery对话框模态消息

在上面的示例中,当用户按下Esc时,对话框将关闭.我想在用户按Enter时调用"Ok"按钮动作.

Answer 1

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

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

更改:eq(0)if是否在不同的索引,或按名称查找等.

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

这个其他stackoverflow问题可以让你到达你想要的地方:

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

Answer 5

另一个让您可以更好地控制对话框中所有按钮的选项是将它们添加为按钮数组.然后在open事件中,您可以通过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(); 
    }
});