jqueryUI datepicker在传递日期之前触发输入的模糊,避免/解决方法？

Question

我对绑定到其blur事件的文本输入进行了一些验证.我在这个字段上有一个datepicker(来自jqueryUI的版本),所以当你单击该字段时,datepicker会出现,然后你点击一个日期,它会像datepicker那样将日期填充到字段中.但是,在输入日期之前,输入字段似乎由于某种原因而被触发.在填充日期之前,焦点似乎远离输入.因此,当用户选择日期时,在日期实际进入字段之前,当它不应该时,我的验证就会被触发.它应该在日期投入后运行.有谁知道为什么模糊是在那时发生或如何解决它？

Answer 1

当用户在输入字段外单击(选择日期)时,输入字段将模糊.没有办法解决这个问题.因此,不使用触发模糊验证,而是使用datepicker的onSelect回调.

$('.selector').datepicker({
    onSelect: function(dateText) { /* validation here */ }
});

如果您想保留onblur事件,可以推迟验证以允许datepicker在验证触发之前填写该字段,如下所示:

$('#myform input').blur(function () {
    setTimeout(function () { /* validation here */ }, 1);
});

使用setTimeout来处理并发问题可能看起来像一个黑客,但由于JavaScripts的单线程特性,它的工作非常好.jQuery-fame的John Resig在这篇博文中讨论了它.

Answer 2

你可以试试这个:

$(".date-pick").datepicker({
...
onSelect: function() {
this.focus();
},
onClose: function() {
this.blur();
}
...

Answer 3

我找到了始终如一地获得键盘和选择器选择事件的唯一方法是使用以下代码:

 $(".date-picker")
            .datepicker("option", "onSelect", function (dateText, inst) {
                // User Method
            })
            .change(function () {
                // User Method
            });

仅使用模糊事件的问题在于(在选择时)datepicker在将值传递给输入之前触发输入上的blur事件.

Answer 4

上面的Magnars答案非常好.只是为了给后代提供更多信息,这也是一种适用于验证模糊验证框架的方法.我实际上是在解锁由document.ready/pageload上的验证设置的模糊事件(非常常见的验证模式),然后将其放回onclose datepicker选项中.datepicker关闭事件显然发生在datepicker将信息传递到字段之后,因此可以在此时运行模糊验证.这样我就不必为验证代码本身的字段做任何特殊操作.任何一种方法都可能适用于任何其他人正在做的事情,如果他们遇到这个.

$('#datefield').datepicker(
{beforeShow: function(input) {
                             $(input).unbind('blur');
             },
 onClose: function(dateText, inst) {
                             $(this).validationEngine();this.focus();this.blur() }
});

(在我的框架中'.validationEngine()'是注册验证处理程序的东西)