web-dev-qa-db-ja.com

jqueryUI datepickerは日付を渡す前に入力のブラーを発生させます、回避/回避策？

ぼかしイベントにバインドされたテキスト入力を検証しています。私はこのフィールド（jqueryUIからのバージョン）に日付ピッカーを持っているので、フィールドをクリックすると日付ピッカーが表示され、日付をクリックすると、日付ピッカーと同じようにフィールドに日付が入力されます。ただし、日付を入力する直前に、何らかの理由で入力フィールドにぼかしが発生しているようです。日付が入力される前に、フォーカスが入力から離れるように見えます。そのため、ユーザーが日付を選択した時点で、実際にはフィールドに日付が入る前に、妥当性検査が行われません。日付が入力された後に実行する必要があります。その時点でぼかしが発生している理由またはその回避方法を誰かが知っていますか？

javascriptjqueryjquery-uidatepicker
22
Purrell

ユーザーが入力フィールドの外側をクリックすると（日付を選択するため）、入力フィールドがぼやけます。それを回避する方法はありません。したがって、ぼかしで検証をトリガーする代わりに、日付ピッカーのonSelectコールバックを使用します。

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

Onblur-eventsを保持したい場合は、検証を延期して、次のように、検証が発生する前に日付ピッカーがフィールドに入力できるようにすることができます。

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

SetTimeoutを使用して同時実行の問題を処理することはハックのように見えるかもしれませんが、JavaScriptのシングルスレッドの性質により、非常にうまく機能します。 jQuery-fameのJohn Resigが このブログ投稿 でそれについて語っています。

16
Magnar

あなたはこれを試すことができます：

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

キーボードとピッカーの両方の選択イベントを一貫して機能させる唯一の方法は、次のコードを使用することでした。

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

Blurイベントのみを使用する場合の問題は、（選択した場合）日付ピッカーが、値が渡される前に入力でblurイベントを発生させることです。

6
kiwiaddo

上記のマグナースの回答はとても良いです。ここで子孫のためにいくつかのより多くの情報を与えるために、ぼかしで検証を行う検証フレームワークでうまく機能するアプローチもあります。私は実際に、document.ready/pageload（検証のかなり一般的なパターン）の検証によって設定されたblurイベントのバインドを解除し、onclose datepickerオプションに戻しています。 datepicker closeイベントは明らかに、datepickerがフィールドに情報を渡した後に発生するため、その時点でブラー検証を実行しても問題ありません。このようにして、検証コード自体のフィールドに対して特別なことをする必要はありません。どちらのアプローチも、おそらくこれに遭遇した場合、他の誰かが行っていることすべてに適用できます。

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

（私のフレームワークでは、「。validationEngine（）」が検証ハンドラを登録します）

5
Purrell

受け入れられた解決策にいくつかの困難があったため、このスレッドをぶつけました。

Datepickerの「onClose」イベントが発生したときに「change」イベントをトリガーするのが最も簡単であることがわかりました。これにより、入力要素の変更イベントが常に発生することが保証されます。

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

何も変更されていないときに発火するため、これはばかげているように見えるかもしれません。ただし、datepickerの「onSelect」よりも確実に機能し、datepickerイベントの前に発生するfocusoutまたはblurイベントの問題を回避するのに役立ちました。

3
BumbleB2na

Jqueryでカスタムイベントを作成し、それをtextboxにバインドします。その後、datepickerのonCloseイベントでイベントをトリガーします。それにより、テキストボックスから移動すると、カスタムイベントが発生します。

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

そしてDatepickerで

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

私はあなたと同じ問題を抱えていました。マグナーの答えは役に立ちましたが、完全に問題に答えることはできませんでした。

根本的な原因を特定しました。ユーザーがカレンダーを操作すると、入力フィールドからフォーカスが削除されます。これにより（jquery控えめな検証の場合）、onBlurイベントが発生し、その入力フィールドの検証がトリガーされます。この時点では、ユーザーが何かを選択するまで、値は以前の値のままです。

したがって、マグナーの答えに基づいて、彼は、カレンダーの「変更」の入力フィールドを再検証する必要があると述べています。最も明白な方法は$("form").valid()を呼び出すことですが、これによりフォーム全体が検証されます。

より良い方法は、日付ピッカーに接続された入力フィールドを検証することです。これを行うことでトリガーできます。

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

これで、ユーザーが入力フィールドの内外をクリックするのを偽装したため、入力フィールドのみが検証されます。

1
Rebecca