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

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

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

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

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

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

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

你可以试试这个:

 $(".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 }); 

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

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

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

(在我的框架中’.validationEngine()’是注册validation处理程序的东西)

因为我在接受的解决方案上遇到了一些困难而导致这个问题出现了。

我发现当datepicker的’onClose’事件触发时触发’change’事件最容易。 这可确保始终触发input元素的change事件:

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

这可能看起来很愚蠢,因为它会在没有任何改变时触发。 但是,它比datepicker的’onSelect’更可靠,并帮助我避免在datepicker事件之前触发焦点或模糊事件的问题。

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

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

并在Datepicker中

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

我遇到了和你一样的问题,Magnar的答案有所帮助,但没有完全回答这个问题。

您已确定了根本原因。 用户与日历交互的动作从输入字段中移除焦点。 这(在jquery不显眼的validation的情况下)将导致onBlur事件触发,触发该输入字段的validation。 此时,该值仍然是之前的值,直到用户选择了某些内容。

因此,在Magnar的答案的基础上,他声明你需要重新validation输入字段onChange of the calendar。 最明显的方法是调用$("form").valid() ,但是这会validation整个表单。

更好的方法是只validation连接到日期选择器的输入字段,您可以通过执行以下操作来触发:

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

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