如何从字段模糊的文本输入中获取值[重复]答案

【问题标题】：How to get value from text input on blur of field [duplicate]如何从字段模糊的文本输入中获取值[重复]
【发布时间】：2013-07-23 18:11:50
【问题描述】：

我正在尝试编写一些 Javascript 来从两个文本输入中获取值，这应该相当简单。但有些不对劲。这是我的代码：

<script>
    jQuery(function() {
        jQuery('#fromPicker, #toPicker').datepicker({ dateFormat : 'yy-mm-dd' });

        jQuery('#submit').attr('disabled', 'disabled');

        jQuery('#toPicker').on('blur', function() {
            var fromDate = jQuery('#fromPicker').val();
            var toDate = jQuery('#toPicker').val();
            console.log(toDate);

            if (fromDate !== '' && toDate !== '') {
                if (isValidDate(fromDate) && isValidDate(toDate)) {
                    jQuery('#submit').removeAttr('disabled');
                } else {
                    alert('You must enter dates in the format "yyyy-mm-dd"');
                }
            } 
        });
    });

    function isValidDate(dt) {
        if (dt.match(/^[0-9]{4}\-(0[1-9]|1[012])\-(0[1-9]|[12][0-9]|3[01])/)) {
            return true;
        }
    }
</script>

但是，当我 console.log(toDate) 时，我得到一个空字符串。但是，如果我再次执行另一个 blur 事件（聚焦并取消聚焦仍然在其中的数据的字段），我会得到正确的值。任何想法为什么它第一次不起作用？

两个文本输入的 ID 分别为 #fromPicker 和 #toPicker，并且是 jQueryUI 日期选择器。

解决方案：

最终我想做的是：

jQuery（函数（）{ jQuery('#fromPicker, #toPicker').datepicker({ 日期格式：'yy-mm-dd' });

    jQuery('#submit').on('click', function() {
        var fromDate = jQuery('#fromPicker').val();
        var toDate = jQuery('#toPicker').val();

        if (fromDate !== '' && toDate !== '') {
            if (isValidDate(fromDate) && isValidDate(toDate)) {
                // do nothing
            } else {
                alert('You must enter dates in the format "yyyy-mm-dd"');
                return false;
            }
        } else {
            return false;
        }
    });
});

function isValidDate(dt) {
    if (dt.match(/^[0-9]{4}\-(0[1-9]|1[012])\-(0[1-9]|[12][0-9]|3[01])/)) {
        return true;
    }
} </script>

【问题讨论】：

如果我从输入中删除日期选择器，console.log 每次都会返回正确的值。那么如何让它与 datepicker 一起使用呢？

标签： javascript jquery jquery-ui

【解决方案1】：

我看不出您的代码有任何不工作的原因，但不是 blur 事件，而是尝试使用 datepicker 的 onselect 事件

jQuery('#toPicker').datepicker( {
    onSelect: function(date) {
        alert(date);
        // Do other stuff
    },
    // ....
);

【讨论】：

这行得通。谢谢 Starx。
@sehummel，不客气 :)

【解决方案2】：

当用户在输入字段外点击（选择日期）时，输入字段会模糊。没有办法解决这个问题。因此，不要触发模糊验证，而是使用 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 在blogpost 中谈到了它。

Link to Original Post

【讨论】：