DateUpicker jqueryUI запускает размытие ввода перед передачей даты, избегать / обходной путь?

Question

У меня есть некоторая проверка правильности ввода текста, связанного с его событием размытия. У меня есть указатель даты в этом поле (версия от jqueryUI), поэтому, когда вы щелкаете по полю, появляется указатель даты, затем вы щелкаете дату, и она заполняет дату в поле, как это делает указатель даты. Однако перед вводом даты кажется, что поле ввода по какой-то причине срабатывает. Похоже, фокус удаляется от ввода до того, как дата будет заполнена. Так что моя проверка запускается прямо в тот момент, когда пользователь выбирает дату, до того, как дата действительно попадет в поле, а когда нет. Он должен быть запущен после того, как дата введена. Кто-нибудь знает, почему в этой точке происходит размытие или как обойти это?

Answer 1

Когда пользователь щелкает за пределами поля ввода (чтобы выбрать дату), поле ввода размывается. Там нет никакого способа обойти это. Таким образом, вместо запуска проверки на размытие, используйте обратный вызов DatePicker onSelect.

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

Если вы хотите сохранить свои onblur-события, вы можете отложить проверку, чтобы средство выбора даты могло заполнить поле до запуска проверки, например:

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

Использование setTimeout для обработки проблем параллелизма может выглядеть как хак, но благодаря однопоточному характеру JavaScripts он работает довольно хорошо. Джон Резиг из jQuery-fame рассказывает об этом в этом посте .

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
            });

Проблема с использованием только события размытия заключается в том, что (при выборе) средство выбора даты запускает событие размытия на входе до того, как значение будет передано ему.

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

Подбираю эту ветку, потому что у меня возникли трудности с принятым решением.

Мне показалось, что проще всего вызвать событие «change» при срабатывании события «onClose» для DatePicker. Это гарантирует, что событие изменения входного элемента всегда срабатывает:

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

Это может показаться глупым, потому что оно срабатывает в то время, когда ничего не изменилось. Тем не менее, он работает более надежно, чем «onSelect» DatePicker и помог мне избежать проблем с фокусировкой или размытием событий перед событиями DatePicker.

Answer 6

У меня была та же проблема, что и у вас, и ответ Магнара помог, но не полностью ответил на проблему.

Вы определили основную причину. Действие пользователя, взаимодействующего с календарем, убирает фокус с поля ввода. Это (в случае ненавязчивой проверки jquery) вызовет событие onBlur, инициирующее проверку этого поля ввода. В этот момент значение остается прежним, пока пользователь не выберет что-либо.

Следовательно, основываясь на ответе Магнара, он заявляет, что вам необходимо повторно проверить поле ввода при изменении календаря. Наиболее очевидный способ - вызвать $("form").valid(), однако это подтверждает всю форму.

Лучший способ - просто проверить поле ввода, связанное со средством выбора даты, и вы можете запустить его, выполнив следующее:

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

Теперь проверяется только ваше поле ввода, поскольку вы фальсифицировали пользователя, щелкающего в поле ввода и выходящего из него.

Answer 7

Создайте свое собственное событие в jquery и привяжите его к текстовому полю. После этого вызовите событие onClose для события datepicker. Таким образом, если вы выйдете из текстового поля, пользовательское событие будет запущено.

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

и в DatePicker

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