jquery-ui对话框：将对话框中的一个按钮设为默认操作（Enter键）

5 浏览
0 Comments

jquery-ui对话框：将对话框中的一个按钮设为默认操作（Enter键）

在jquery模态对话框中，是否有一种方法可以选择一个按钮作为默认操作（当用户按下回车键时执行的操作）？

以jquery网站上的示例为例：

jquery对话框模态消息

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

0

3 答案

0 Comments

问题的原因是希望在jquery-ui对话框中，按下Enter键时，一个特定的按钮成为默认操作。解决方法是使用keydown事件监听Enter键按下的动作，然后触发相应按钮的点击事件。以下是解决方法的代码示例：

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

上述代码将Enter键的keyCode与jquery-ui的keyCode进行比较，如果相等，则触发对应按钮的点击事件。需要注意的是，可以通过修改`:eq(n)`中的`n`的值来选择其他按钮作为默认操作。

需要注意的是，为了防止事件冒泡，代码中添加了`return false`来阻止事件继续传播。这样做可以更好地处理Enter键的情况。

这种方法可以避免设置焦点（如其他解决方法所示）导致使用Tab键切换到其他字段的高级用户在表单中按下"Enter"键时出现问题。

推荐使用`which`代替`keyCode`。为了使这段代码起作用，需要将动作行修改为以下代码：

$(this).parent().find('button:nth-child(1)').click();

由于最近的元素已经占据了第0个位置，所以需要将选择器中的索引修改为1。

通过上述解决方法，可以实现在jquery-ui对话框中将一个按钮设置为默认操作（按下Enter键时触发点击事件）。

0
0 Comments

问题出现的原因是：在jquery-ui Dialog中，想要将一个按钮设置为默认操作（按下Enter键触发），但是默认情况下，对话框中的第一个按钮才会被设置为默认操作。

解决方法如下：

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

这段代码可以在任何版本的jQuery UI中使用。它的作用是在对话框打开时，将第二个按钮设置为默认操作。

0
0 Comments

在jquery-ui的对话框的打开函数中，可以通过设置按钮的焦点来使按钮成为默认操作（按下Enter键）。

问题原因：

在较新版本的jQuery UI中，对话框的DOM结构中的div.ui-dialog-buttonpane不再是$(this)的父元素，而是兄弟元素。

解决方法：

一种解决方法是使用以下代码：

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

这样可以通过设置按钮的焦点来使其成为默认操作。

另一种解决方法是使用以下代码：

$('.ui-dialog :button').blur();
$('.ui-dialog :button:last').focus();

这样可以将焦点设置在最后一个按钮上，从而实现默认操作（按下Enter键）。

需要注意的是，以上解决方法仅适用于只有按钮的情况。如果想要将焦点设置在其他控件上而不是默认按钮上，那么以上方法就不适用了。此时，可以考虑使用键盘事件监听器来实现更灵活的操作。

通过在对话框的打开函数中设置按钮的焦点，可以实现将按钮设置为默认操作（按下Enter键）。根据不同的jQuery UI版本，可以使用不同的代码来实现此功能。以上提供的两种解决方法可以帮助开发者解决这个问题。

0