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在this blogpost中讨论了它。

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（）'是注册验证处理程序的那些）

Answer 5

因为我对已接受的解决方案有些困难而碰到这个帖子。

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

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

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

Answer 6

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

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

并在Datepicker中

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

Answer 7

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

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

因此，在Magnar的回答的基础上，他声明您需要在日历的更改上重新验证输入字段。最明显的方法是调用$("form").valid()，但这会验证整个表单。

更好的方法是只验证连接到日期选择器的输入字段，然后通过执行以下操作来触发：

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

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

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

7 个答案: