1

我正在尝试创建一个非常简单的模式对话框，它只显示一个文本区域。

目标：

  • 如果用户点击“esc”键，它将消失（文本输入被忽略）
  • 如果用户输入文本并按下“回车”键，则运行接受输入的函数（称为“postText(userinput)”）

我想知道是否可以使用 jQuery BlockUI：http ://malsup.com/jquery/block/#demos 。

但是，我不确定如何实际关闭基于 esc 的对话框，或者如果用户按 Enter 键则运行函数。

任何帮助将非常感激！

4

3 回答 3

4

关闭对话框ESC，只需添加一个keyup侦听器document并$.unblockUI在键码等于时调用27。

​​$(document).on('keyup', ​​​function(e) {
  if (e.which === 27) { // Escape key
    $.unblockUI();
  }
});​

对于表单，只需在对话框的输入字段中添加一个事件侦听器。基本上是一样的。

​​$('#the-input').on('keyup', ​​​function(e) {
  if (e.which === 13) { // Enter key
    // AJAX maybe?
    $.post('your/url', { data: $(this).val() }, function(response) {
      $.unblockUI();            
    });
  }
});​

编辑

在加载 DOM 后分配这些侦听器。因此，您加载的脚本文件将包含：

$(document).ready(function() {
    // Code from the two listings above here

    // Trigger blockUI by click on an link for example
    $('a').on('click', function(e) {
        e.preventDefault();

        $.blockUI({ message: $('#your-form') });
    });
});
于 2012-07-30T12:11:10.663 回答
4

尝试这样的事情；

$('#txtValue').keyup(function(e) {
    e.preventDefault();

    if (e.keyCode === 13) {
        // The Enter key was pressed
        postText($(this).val());   
    }
});

您应该如何使用form.submit事件而不是监听enter密钥。

if (e.keyCode === 27) {
    // The Esc key was pressed
    $('#dialog').hide();
}

另请参阅这些以获取更多信息；

https://stackoverflow.com/search?q=javascript+esc+key

https://stackoverflow.com/search?q=javascript+enter+key

于 2012-07-30T12:13:36.000 回答
1

javascript:

("#yourInput").keyup(function(e){
    switch (e.keyCode) {
    case 13: # enter
    # logic
    case 27: # esc
    # logic
    }
})
于 2012-07-30T12:12:58.510 回答