jQuery रोकें .blur() घटना "सबमिट" बटन पर क्लिक करते समय

Question

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

हालांकि जब आप सबमिट बटन पर क्लिक करते हैं तो यह समस्या है जब यह सबमिट बटन पर क्लिक करता है, यह ब्लर फ़ंक्शन को उत्तेजित करता है, बटन को छुपाता है और फ़ॉर्म को कम करता है। मुझे .blur() विधि को रोकने के लिए एक तरीका खोजने की आवश्यकता है जब उपयोगकर्ता सबमिट बटन पर फ़ोकस करने के लिए क्लिक कर रहा हो। क्या इसके लिए कोई अच्छा कामकाज है?

मुझे प्राप्त होने वाली किसी भी मदद की सराहना करेंगे!

Answer 1

यह सबसे सुंदर समाधान नहीं है, लेकिन यह काम करता है। इस प्रयास करें:

$("#submitbtn").mousedown(function() { 
    mousedownHappened = true; 
}); 

$("#email").blur(function() { 
    if (mousedownHappened) // cancel the blur event 
    { 
     mousedownHappened = false; 
    } 
    else // blur event is okay 
    { 
     $("#email").animate({ 
      opacity: 0.75, 
      width: '-=240px' 
     }, 500, function() { 
     }); 

     // hide submit button 
     $("#submitbtn").fadeOut(400); 
    } 
});​ 

DEMO HERE

Answer 2

.blur हैंडलर के अंदर इस प्रयास करें:

if ($(':focus').is('#submitbtn')) { return false; } 

Answer 3

क्यों submit बजाय घटना click पर भरोसा नहीं? http://jsbin.com/ehujup/5/edit

form में html में सिर्फ जोड़ी परिवर्तन और जे एस

चादर इनपुट और ईमेल के लिए required जोड़ने के रूप में यह स्पष्ट रूप से,

<form id="form"> 
<div id="signup"> 
    <input type="email" name="email" id="email" placeholder="me@email.com" tabindex="1" required="required"> 
    <input type="submit" name="submit" id="submitbtn" value="Signup" class="submit-btn" tabindex="2"> 
</div> 
</form> 

js में

होने के लिए लगता है कि हैंडलर जो #submitbtn

सुनने को दूर

$("#submitbtn").on("click", function(e){ 
    e.stopImmediatePropagation(); 
    $("#signup").fadeOut(220); 
}); 

और इसके बजाय फॉर्म listerer सबमिट करें

$("#form").on("submit", function(e){ 
    $("#signup").fadeOut(220); 
    return false; 
}); 

आप इसे बेहतर बनाने के लिए $.ajax() का उपयोग कर सकते हैं।

ऐसा करने से आप सत्यापन के मामले में बिंदु प्राप्त कर सकते हैं और मूल ब्राउज़र के HTML5 सत्यापनकर्ता चेक ईमेल प्रारूप को बनाएंगे जहां यह समर्थित है।

Answer 4

मुझे पता है कि यह प्रश्न पुराना है लेकिन ऐसा करने का सबसे आसान तरीका ईवेंट.संबंधित लक्ष्य की जांच करना होगा। यदि कथन का पहला भाग संबंधित है तो एक त्रुटि फेंकने से रोकने के लिए है लक्ष्य (लक्ष्य शून्य सर्किट होगा क्योंकि शून्य शून्य के बराबर है और ब्राउजर जानता है कि अगर पहली शर्त गलत है तो उसे दूसरी स्थिति की जांच नहीं करनी पड़ेगी & & कथन में)।

तो:

if(event.relatedTarget && event.relatedTarget.type!="submit"){ 
    //do your animation 
}