在<输入器上提交 jQuery UI 对话框>

2022-08-30 04:33:46

我有一个带有表单的jQuery UI对话框。我想模拟单击对话框的按钮之一,这样您就不必使用鼠标或选项卡。换句话说,我希望它像一个常规的GUI对话框,模拟点击“确定”按钮。

我假设这可能是对话框的一个简单选项,但我在jQuery UI文档中找不到它。我可以用keyup()绑定每个表单输入,但不知道是否有更简单/更干净的方法。谢谢。


答案 1

我不知道jQuery UI小部件中是否有选项,但您可以简单地将事件绑定到包含对话框的div...keypress

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

无论对话框中的哪个元素具有焦点,它都会运行,这可能是也可能不是一件好事,具体取决于您想要什么。

如果要将其作为默认功能,可以添加以下代码:

// jqueryui defaults
$.extend($.ui.dialog.prototype.options, { 
    create: function() {
        var $this = $(this);

        // focus first button and bind enter to it
        $this.parent().find('.ui-dialog-buttonpane button:first').focus();
        $this.keypress(function(e) {
            if( e.keyCode == $.ui.keyCode.ENTER ) {
                $this.parent().find('.ui-dialog-buttonpane button:first').click();
                return false;
            }
        });
    } 
});

以下是它的外观的更详细视图:

$( "#dialog-form" ).dialog({
  buttons: { … },
  open: function() {
    $("#dialog-form").keypress(function(e) {
      if (e.keyCode == $.ui.keyCode.ENTER) {
        $(this).parent().find("button:eq(0)").trigger("click");
      }
    });
  };
});

答案 2

我已经总结了上面的答案并添加了重要的东西

$(document).delegate('.ui-dialog', 'keyup', function(e) {
        var target = e.target;
        var tagName = target.tagName.toLowerCase();

        tagName = (tagName === 'input' && target.type === 'button') 
          ? 'button' 
          : tagName;

        isClickableTag = tagName !== 'textarea' && 
          tagName !== 'select' && 
          tagName !== 'button';

        if (e.which === $.ui.keyCode.ENTER && isClickableTag) {
            $(this).find('.ui-dialog-buttonset button').eq(0).trigger('click');

            return false;
        }
    });

优势:

  1. 不允许在不兼容的元素(如 、或输入)上使用类型按钮输入键,想象一下用户单击 Enter 键并提交表单,而不是获取新行!textareaselectbuttontextarea
  2. 绑定完成一次,避免使用对话框'open'回调绑定回车键,避免每次对话框'打开'时一次又一次地绑定相同的函数
  3. 避免像上面的一些答案所建议的那样更改现有代码
  4. 使用“delegate”而不是已弃用的“live”,并避免使用新的“on”方法来允许使用旧版本的jquery。
  5. 因为我们使用委托,这意味着上面的代码甚至可以在初始化对话框之前编写。你也可以把它放在头标签,即使没有$(document).ready
  6. 此外,委托将只将一个处理程序绑定到并且不会像上面的一些代码那样将处理程序绑定到每个对话框,以提高效率document
  7. 甚至适用于动态生成的对话框,如$('<div><input type="text"/></div>').dialog({buttons: .});
  8. 与IE 7 / 8 / 9一起工作!
  9. 避免使用慢速选择器:first
  10. 避免使用像这里的答案一样的黑客来制作隐藏的提交按钮

弊:

  1. 将第一个按钮作为默认按钮运行,可以选择另一个按钮,或在if语句中调用函数eq()
  2. 所有对话框都将具有相同的行为,您可以通过使选择器更具体(即“#dialog”而不是'.ui-dialog'

我知道这个问题很老,但我也有同样的需求,所以,我分享了我使用过的解决方案。