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

Posted 2023-05-07

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

【英文标题】：jqueryUI datepicker fires input's blur before passing date, avoid/workaround?

【发布时间】：2010-12-21 07:41:37

【问题描述】：

我对绑定到其模糊事件的文本输入进行了一些验证。我在此字段上有一个日期选择器（来自 jqueryUI 的版本），因此当您单击该字段时，会显示 datepicker，然后您单击一个日期，它会像 datepicker 一样将日期填充到该字段中。但是，在输入日期之前，输入字段似乎由于某种原因被触发了模糊。在填充日期之前，焦点似乎从输入中消失了。所以我的验证会在用户选择日期时触发，在日期实际进入字段之前，而它不应该。它应该在输入日期后运行。有谁知道为什么此时会发生模糊或如何解决它？

【参考方案1】：

当用户在输入字段外点击（选择日期）时，输入字段会模糊。没有办法解决这个问题。因此，不要触发模糊验证，而是使用 datepicker 的 onSelect 回调。

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

如果您想保留 onblur 事件，您可以推迟验证以允许日期选择器在验证触发之前填写该字段，如下所示：

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

使用 setTimeout 处理并发问题可能看起来像一个 hack，但由于 javascript 的单线程特性，它工作得非常好。 jQuery-fame 的 John Resig 在this blogpost 中谈到了它。

【讨论】：

嗯，这可能有效。我必须设法将验证注册到 datepicker'ed 字段的模糊，因为我的验证模糊事件处理程序已注册到 onload 中的所有文本字段，但可行。

我添加了一种不同的方法，可以更好地满足您的需求。

【参考方案2】：

你可以试试这个：

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

...

【参考方案3】：

我发现让键盘和选择器选择事件始终正常工作的唯一方法是使用以下代码：

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

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

【参考方案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()' 是注册验证处理程序的内容）

【参考方案5】：

因为我对接受的解决方案有一些困难，所以讨论了这个帖子。

我发现当 datepicker 的 'onClose' 事件触发时最容易触发 'change' 事件。这确保了输入元素的更改事件总是触发：

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

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

【参考方案6】：

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

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

在日期选择器中

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

【参考方案7】：

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

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

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

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

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

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

【讨论】：

当我这样做时，模糊事件会连续触发——我猜是递归循环。此外，由于持续触发焦点事件，日期选择器会立即重新出现，因此用户无法隐藏选择器。