在 JQuery ui datepicker 中禁用输入键答案

【问题标题】：Disable enter key in JQuery ui datepicker在 JQuery ui datepicker 中禁用输入键
【发布时间】：2013-02-11 08:33:39
【问题描述】：

JQuery UI 日期选择器似乎存在一个错误，当用户手动输入日期并按 Enter 键时，日期选择器关闭但焦点停留在该字段上，因此日历不会再次打开，直到文本框失去焦点并获得它再次。如何抑制输入键行为？或者对于这个看似已知的错误还有其他已知的解决方案吗？谢谢！

编辑

在做了更多工作之后，这是我想出的解决方案：

$('#someid').bind('keydown', function(event) {

    if (event.which == 13) {var e=jQuery.Event("keydown");
                    e.which = 9;//tab 
                    e.keyCode = 9;
                    $(this).trigger(e);
                    return false;
                }
            });

tab 键效果很好，可以防止日期选择器的 enter 键事件的默认行为，例如在某些情况下选择今天的日期。

【问题讨论】：

我遇到了同样的问题。我的 UI 日期选择器由在边缘场景中运行的脚本设置为“空白”。用户输入数字文本和标签到下一个字段，他们的数字被自动格式化为正确的“斜线分隔”日期。但是，如果他们输入数字并按 ENTER 键，它会忽略他们的输入并用 TODAY 的日期替换他们的数字。我尝试实现您的事件处理程序似乎不起作用 - 但是，除了 JQuery UI 之外，我还使用了一些额外的不显眼的验证器。不确定这些是否会妨碍您。
好的，解决了我的问题。请参阅我对代码 sn-p 的附加答案。基本上，在应用 JQuery UI 日期选择器功能之前，我必须确保首先将 keydown 处理程序解决方案绑定到所选元素
您的解决方案依赖于抛出的异常。请参阅下面的答案以获得更优雅的解决方案。

标签： jquery jquery-ui uidatepicker keyboard-events

【解决方案1】：

我最初在应用您的解决方案时遇到了问题。我认为值得发布我更大的 sn-p 以提供更多上下文。

if (!Modernizr.inputtypes.date) {
    //use modernizer to weed out browsers that already have a timepicker 
    //http://stackoverflow.com/questions/11297827/html5-date-input-type-interfering-with-jquery-datepicker

    $("input[data-val-date]")
                    .bind('keydown', function (event) {  // BEGIN APPLYING NinaNa's S.O. ANSWER
                    if (event.which == 13) {
                        var e = jQuery.Event("keydown");
                        e.which = 9;//tab 
                        e.keyCode = 9;
                        $(this).trigger(e);
                        return false;
                    }
    }).datepicker({ dateFormat: 'mm/dd/yy' }); //THEN APPLY JQUERY UI FUNCTIONALITY


}

【讨论】：

【解决方案2】：

试试这个

$(document).keydown(keyDownHandler); // use appropriate selector for the keydown handler

function keyDownHandler(e) {
    if(e.keyCode === 13) {
        e.stopPropagation();
        e.preventDefault();

        return false;
    }
}

e.stopPropagation 防止冒泡，e.preventDefault 防止默认行为，我认为返回 false 也是如此。

您应该看看最有效的方法：keyUp、keyDown 或 keyPress。

【讨论】：

感谢您的快速响应，请参阅下面的解决方法，您怎么看？
@NinaNa 好吧，如果可以，为什么不呢？我认为这是一个很好的解决方案。
唯一的事情是我意识到当输入的日期无效或为空时，我想抑制输入键在文本框中放入今天的日期的行为......所以我想我需要像你一样的 s\t写了

【解决方案3】：

通过在 datepicker 的 onClose 方法中添加一个 blur() 事件来解决。

【讨论】：

【解决方案4】：

最简单的方法是像往常一样在<input> 上实例化日期选择器，然后我们自己去掉焦点处理程序并用点击处理程序替换它。

【讨论】：

【解决方案5】：

使用e.stopImmediatePropagation()，并确保在调用datepicker()之前发生keydown绑定。

  $('input').on('keydown', function(e) {
      if (e.which == 13)
          e.stopImmediatePropagation();
  }).datepicker();

Credit

【讨论】：