[jquery-ui]提交对 <Enter> 的 jQuery 用户界面对话框

标签: jQuery jQuery-UI
发布时间: 2011/5/26 11:22:22
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

我有一个 jQuery 用户界面对话框与窗体。我想模拟点击对话框的按钮之一,因此您不必使用鼠标或通过它的选项卡。换句话说,我希望它像一个常规的图形用户界面对话框在模拟点击"确定"按钮。

我想这可能是简单的选项,使用该对话框,但我的 jQuery UI 文件中找不到它。可以绑定的每个窗体输入的 keyup(),但不知道是否有简单/清洗方式。谢谢你。

解决方法 1:

我不知道,是否有一个选项,在 jQuery 的用户界面构件,但您可以只将 keyup 事件绑定到包含您的对话框的 div...

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

这会运行不管什么元素具有焦点时在您的对话框中,也可能不是一件好事取决于您想要什么。

解决方法 2:

$('#dialogBox').dialog('open');
$('.ui-dialog-buttonpane > button:last').focus();

JQuery UI (1.8.1) 的最新版本,它运行得漂亮。您还可以使用: 第一,而不是: 要取决于哪个按钮设置为默认的最后。

此解决方案中,相对于选定上面,显示哪个按钮是默认的用户的优点。用户还可以标签按钮之间,并按 enter 键将单击该按钮当前焦点下。

欢呼。

解决方法 3:

使这项工作更一般粗而有效的办法:

$.fn.dlg = function(options) {
    return this.each(function() {
             $(this).dialog(options);
             $(this).keyup(function(e){
                  if (e.keyCode == 13) {                
                       $('.ui-dialog').find('button:first').trigger('click');
                  }
             });
    });
}

然后创建一个新的对话框时你可以这样做:

$('#a-dialog').mydlg({...options...})

和之后使用它像一个正常的 jquery 的对话框:

$('#a-dialog').dialog('close')

有改善,使它在特殊情况下的工作方式。上面的代码,它将自动与命中的第一个按钮,按钮触发时,对话框中输入的选择。此外假定是,在任何给定的时间可能不是这样,只有一个活动对话框中的。但你知道了吧。

注: 如上文所述,按的按钮输入取决于您的设置。因此,在某些情况下您可能需要使用: 在.find 方法和其他您可能要使用的第一个选择器: 最后的选择器。

解决方法 4:

我不知道怎么样更简单,但通常您会跟踪哪个按钮当前具有焦点。如果焦点更改为不同的控件,然后"按钮焦点"仍在最后获得焦点的按钮上。通常情况下,"按钮焦点"会启动您的默认按钮。Tab 键切换到不同的按钮会更改"按钮焦点"。你将不得不决定是否导航到一个不同的窗体元素会"按钮焦点"到默认按钮再次重设。您可能还需要就会失去真正的重点在窗口中显示聚焦按钮浏览器默认值以外的一些可视的指示器。

一旦你下了按钮焦点逻辑和实施,然后我将会添加到对话框本身的一个关键的处理程序和有它调用与当前关注的按钮关联的操作。

编辑: 我作出的假设您想要能打输入,每当您在填写表单元素,并有需要优先考虑的"当前"按钮的操作。如果您只希望按钮焦点,这种行为,我的答案是太复杂了。

解决方法 5:

如果您知道该按钮元素选择器:

$('#dialogBox').dialog('open');
$('#okButton').focus();

应为你做的把戏。这将集中确定按钮,然后输入将单击',正如你所期望。这是在本机用户界面对话框中使用相同的技术。

解决方法 6:

做和做

  $('#login input').keyup(function(e) {
if (e.keyCode == 13) {
  $('#login form').submit();
}

}

解决方法 7:

我做了这种方式 … …;)希望有人会有帮助...

$(window).keypress(function(e) {
    if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
        $(".ui-dialog:visible").find('.ui-dialog-buttonpane').find('button:first').click();
        return false;
    }
});

解决方法 8:

   $("#LogOn").dialog({
       modal: true,
       autoOpen: false,
       title: 'Please Log On',
       width: 370,
       height: 260,
       buttons: { "Log On": function () { alert('Hello world'); } },
       open: function() { $(this).parents('.ui-dialog-buttonpane button:eq(0)').focus();}
   });

解决方法 9:

这应触发单击该按钮的 click 处理程序的工作。此示例假定您已经设置了对话框中的窗体使用的 jquery.validate 插件。但可以很好地适应。

open: function(e,ui) {
    $(this).keyup(function(e) {
        if (e.keyCode == 13) {
           $('.ui-dialog-buttonpane button:last').trigger('click');
        }
    });
},
buttons: {
    "Submit Form" : function() {
            var isValid = $('#yourFormsID').valid();
            // if valid do ajax call
            if(isValid){
               //do  your ajax call here. with serialize form or something...

            }
}

解决方法 10:

对于这个问题,我发现一个很简单的解决方案:

var d = $('<div title="My dialog form"><input /></div>').dialog(
    buttons: [{
        text: "Ok",
        click: function(){
            // do something
            alert('it works');
        },
        className: 'dialog_default_button'
    }]
});

$(d).find('input').keypress(function(e){
    if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
        e.preventDefault();
        $('.dialog_default_button').click();
    }
});

解决方法 11:

而不是像在这个答案 (,我找不到工作) 的关键代码的听力可以绑定到的对话框中的窗体提交事件,然后执行以下操作:

$("#my_form").parents('.ui-dialog').first().find('.ui-button').first().click();

所以,整件事会如下所示

$("#my_form").dialog({
  open: function(){
    //Clear out any old bindings
    $("#my_form").unbind('submit');
    $("#my_form").submit(function(){
      //simulate click on create button
      $("#my_form").parents('.ui-dialog').first().find('.ui-button').first().click();
      return false;
    });
  },
  buttons: {
    'Create': function() {
      //Do something
    },
    'Cancel': function() {
      $(this).dialog('close');
    }
  }
});

请注意不同的浏览器以不同的方式,处理按 enter 键,一些并不总是对 enter 提交。

赞助商