禁用JQuery UI日期选择器中的回车键

Question

似乎 JQuery UI datepicker 存在一个 bug，当用户手动输入日期并按下回车键时，datepicker 会关闭但焦点仍然停留在字段上，因此日历不会再次打开，直到文本框失去焦点并再次获得焦点。如何取消回车键的行为？或者有没有其他已知的解决方案来解决这个看似已知的 bug？ 谢谢！

编辑 经过进一步的研究，我想出了以下解决方案：

$('#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键工作良好，可以防止日期选择器的回车键事件触发默认行为，例如在某些情况下选择今天的日期。

- NinaNa

---

我遇到了同样的问题。我的UI日期选择器被一个在边缘情况下运行的脚本设置为空白。用户输入数字文本并切换到下一个字段，他们的数字会自动正确格式化为适当的“斜杠分隔”日期。然而，如果他们输入数字并按ENTER键，它会忽略他们的输入，并用今天的日期替换他们的数字。我尝试实现您的事件处理程序，但似乎不起作用 - 不过，我除了JQuery UI之外还使用了一些额外的非侵入式验证器。不确定这些是否会妨碍。 - bkwdesign

好的，我解决了我的问题。请查看我的附加答案以获取代码片段。基本上，在应用JQuery UI日期选择器功能之前，我必须先确保将keydown处理程序解决方案绑定到所选元素。 - bkwdesign

您的解决方案依赖于抛出异常。请看下面我的答案，以获取更优雅的解决方案。 - Joel Christophel

Answer 1

我最初在应用你的解决方案时遇到了问题。我认为值得发布我的更大代码片段，以便提供更多上下文。

if (!Modernizr.inputtypes.date) {
    //use modernizer to weed out browsers that already have a timepicker 
    //https://dev59.com/mWgu5IYBdhLWcg3we2-t

    $("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


}

- bkwdesign

Answer 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。

- Tim S.

---

谢谢您的快速回复，以下是我的解决方法，请问您觉得怎么样？ - NinaNa

@NinaNa嗯，如果它能够胜任工作，为什么不呢？我认为这是一个很棒的解决方案。 - Tim S.

唯一的问题是我意识到我想要抑制输入框中输入无效或为空的日期时回车键自动填入今天日期的行为...所以我猜我需要像你写的那样的 s\t。 - NinaNa

Answer 3

通过将blur（）事件添加到datepicker的onClose方法中解决。

- NinaNa

Answer 4

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

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

信用

- Joel Christophel

Answer 5

最简单的方法是像正常情况下实例化日期选择器一样在 <input> 上进行，但是我们要自己删除焦点处理程序并用点击处理程序替换它。

- ARS