jqueryui日期选择器在传递日期之前触发输入的模糊,是否避免/解决?

当用户在输入框外单击(选择日期)时,输入框将变模糊。这是不可能的。因此,不要触发模糊验证,而是使用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在 this blogpost .

您可以尝试以下操作:

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

我发现唯一能同时使用键盘和选择器选择事件的方法是使用以下代码:

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

仅使用模糊事件的问题是(选择时)日期选择器在传递值之前在输入上触发模糊事件。

麦格纳斯的回答很好。为了给后代更多的信息,这里还有一种方法可以很好地与对blur进行验证的验证框架配合使用。我实际上正在解除绑定由document.ready/pageload上的验证设置的blur事件(验证的常见模式),然后将其放回onclose-datepicker选项。datepicker close事件显然发生在datepicker将信息传递到字段之后,因此此时可以运行模糊验证。这样我就不必为验证代码本身的字段做任何特殊的事情。任何一种方法都可能适用于任何其他人正在做的事情,如果他们遇到这种情况。

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

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

因为我在接受的解决方案上遇到了一些困难,所以碰到了这个线程。

我发现当datepicker的“onClose”事件触发时,最容易触发“change”事件。这样可以确保输入元素的更改事件始终触发:

$('#my_element').datepicker({
    onClose: function() {
        $(this).trigger('change');
    }
});

这可能看起来很愚蠢,因为它会在没有改变的时候开火。但是,它比datepicker的“onselect”更可靠,帮助我避免了focusout或blur事件在datepicker事件之前触发的问题。

在jquery中创建自定义事件并将其绑定到文本框。之后,将触发datepicker的onClose事件。这样,如果您移出文本框,那么自定义事件将被激发。

$("inputText").bind('CustomEventName',function(){//your validate method code});

在日期选择器中

$("#inputText").datePicker({onClose:function(){ $(this).trigger('CustomEventName')});

我和你有同样的问题,马格纳的回答有帮助,但没有完全回答这个问题。

您已经确定了根本原因。用户与日历交互的操作将焦点从输入字段中移除。这(在jquery非干扰性验证的情况下)将导致onblur事件触发,从而触发该输入字段的验证。此时,该值仍然是前一个值,直到用户选择某个值为止。

因此,根据Magnar的回答,他说您需要在更改日历时重新验证输入字段。最明显的方法是 $("form").valid() 但是,这将验证整个表单。

一种更好的方法是只验证连接到日期选择器的输入字段,您可以通过这样做来触发它:

$('#myform input').blur(function () {
    var that = this;
    setTimeout(function () {
        $(that).trigger("focus").trigger("blur");
    }, 100);
});

现在只验证输入字段,因为您伪造了用户点击输入字段的输入和输出。