jqueryUI डेटपिकर तिथि गुजरने से पहले इनपुट के धुंध को फायर करता है, टावर/वर्कअराउंड?

Question

मेरे पास धुंधला ईवेंट से जुड़े टेक्स्ट इनपुट पर कुछ सत्यापन है। मेरे पास इस फ़ील्ड (jqueryUI से संस्करण) पर डेटपिकर है, इसलिए जब आप फ़ील्ड पर क्लिक करते हैं, डेटपिकर दिखाता है, तो आप एक तिथि पर क्लिक करते हैं और यह डेटपिकर के रूप में फ़ील्ड में तारीख को पॉप्युलेट करता है। हालांकि, तिथि दर्ज होने से ठीक पहले ऐसा लगता है कि इनपुट फ़ील्ड को किसी कारण से धुंधला हो जाता है। ऐसा लगता है कि तिथि आने से पहले इनपुट से फोकस दूर हो जाता है। इसलिए जब मेरी तारीख वास्तव में क्षेत्र में अपना रास्ता बनाती है, तो जब यह नहीं होना चाहिए, तो उपयोगकर्ता को एक तिथि चुनने पर उस बिंदु पर सही ढंग से निकाल दिया जाता है। तारीख को डालने के बाद इसे चलाना चाहिए। क्या किसी को पता है कि उस बिंदु पर धुंध क्यों हो रहा है या इसके आसपास कैसे काम करना है?

Answer 1

जब उपयोगकर्ता इनपुट फ़ील्ड के बाहर क्लिक करता है (दिनांक चुनने के लिए), इनपुट फ़ील्ड धुंधला हो जाएगा। उसके चारों ओर कोई रास्ता नहीं है। तो, धुंध पर सत्यापन को ट्रिगर करने के बजाय, डेटपिकर का चयन करें कॉलबैक चुनें।

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

आप अपने onBlur-घटनाओं को बनाए रखना चाहते हैं, तो आप सत्यापन स्थगित कर सकता है मान्यता सक्रिय होने से पहले क्षेत्र को भरने के लिए, इस तरह datepicker के लिए अनुमति देने के लिए:

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

संभाल करने setTimeout का उपयोग करना concurrency- मुद्दों एक हैक की तरह लग सकता है, लेकिन जावाScripts एकल थ्रेडेड प्रकृति के कारण, यह काफी अच्छी तरह से काम करता है। JQuery12 प्रसिद्धि के जॉन रेसिग this blogpost में इसके बारे में बात करते हैं।

Answer 2

ऊपर दिए गए मैग्नर्स का जवाब बहुत अच्छा है। यहां संतान के लिए कुछ और जानकारी देने के लिए यहां एक दृष्टिकोण भी है जो धुंध पर सत्यापन करने वाले सत्यापन ढांचे के साथ अच्छी तरह से काम करता है। मैं वास्तव में ब्लर इवेंट को अनबाइंड कर रहा हूं जिसे document.ready/pageload (सत्यापन के लिए सुंदर सामान्य पैटर्न) पर सत्यापन द्वारा स्थापित किया गया था, और उसके बाद इसे ऑनक्लोज डेटपिकर विकल्प में वापस डाला गया। डेटपिकर बंद घटना स्पष्ट रूप से तब होती है जब डेटपिकर ने क्षेत्र में जानकारी पास कर दी है, इसलिए उस बिंदु पर धुंध सत्यापन के लिए ठीक है। इस तरह मुझे सत्यापन कोड में फ़ील्ड के लिए विशेष कुछ भी करने की ज़रूरत नहीं है। यदि कोई भी ऐसा कर रहा है तो कोई भी दृष्टिकोण संभवतः लागू हो सकता है।

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

Answer 3

मैं लगातार दोनों कीबोर्ड और पिकर काम कर निम्न कोड के साथ था घटनाओं का चयन प्राप्त करने का एकमात्र रास्ता मिल गया (मेरे ढांचे '.validationEngine()' में क्या मान्यता संचालकों पंजीकृत करता है) :

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

सिर्फ कलंक घटना का उपयोग कर के साथ समस्या यह है कि (जब चुन कर) datepicker इनपुट पर कलंक ईवेंट सक्रिय करने से पहले मूल्य इसे करने के लिए पारित किया गया है है।

Answer 4

इस धागे को बंपिंग क्योंकि मुझे स्वीकार्य समाधान में कुछ कठिनाई थी।

मुझे डेटपिकर की 'ऑनक्लोस' घटना आग लगने पर 'परिवर्तन' ईवेंट को ट्रिगर करने में सबसे आसान लगता है। यह सुनिश्चित करता है कि इनपुट तत्व के परिवर्तन घटना हमेशा आग:

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

यह मूर्खतापूर्ण लगता है, क्योंकि यह समय पर सक्रिय होगा जब कुछ भी बदल दिया गया है हो सकता है। हालांकि, यह डेटपिकर के 'चयन पर' से अधिक भरोसेमंद काम करता है और मुझे डेटपिकर घटनाओं से पहले फोकस या धुंधला घटनाओं के साथ समस्याओं से बचने में मदद करता है।

Answer 5

jquery में अपना कस्टम ईवेंट बनाएं और इसे टेक्स्टबॉक्स पर बाध्य करें। उसके बाद डेटपिकर की ऑनक्लोज़ घटना पर ईवेंट ट्रिगर करें। इसके द्वारा यदि आप टेक्स्टबॉक्स से बाहर निकलते हैं तो कस्टम ईवेंट निकाल दिया जाएगा।

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

और Datepicker

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

Answer 6

में आप इस कोशिश कर सकते हैं:

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

Answer 7

मैं आप के रूप में एक ही समस्या थी, और Magnar के जवाब में मदद की लेकिन पूरी तरह से समस्या का जवाब नहीं दिया।

आपने अंतर्निहित कारण की पहचान की है। कैलेंडर के साथ बातचीत करने वाले उपयोगकर्ता की कार्रवाई इनपुट फ़ील्ड से फोकस हटा देती है। यह (jquery अविभाज्य सत्यापन के मामले में) ऑनब्लूर इवेंट को आग लगने का कारण बनता है, जो उस इनपुट फ़ील्ड के सत्यापन को ट्रिगर करता है। इस बिंदु पर मान अभी भी पिछला मान है, जब तक कि उपयोगकर्ता कुछ चुनता न हो।

इसलिए, मैग्नर के उत्तर पर निर्माण करते हुए वह कहता है कि आपको कैलेंडर की चेंज पर इनपुट फ़ील्ड को फिर से सत्यापित करने की आवश्यकता है। सबसे स्पष्ट तरीका $("form").valid() पर कॉल करना है, हालांकि यह पूरे फॉर्म को मान्य करता है।

एक बेहतर तरीका सिर्फ दिनांक पिकर से जुड़े इनपुट क्षेत्र मान्य करने के लिए है, और आप ऐसा करने से उस को गति प्रदान कर सकते हैं:

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

अब केवल अपने इनपुट क्षेत्र मान्य है, क्योंकि आप का नाटक किया गया है उपयोगकर्ता इनपुट क्षेत्र में और बाहर क्लिक कर रहा है।