धुंध का कारण बनने वाले क्लिक ईवेंट के बाद जावास्क्रिप्ट ब्लर इवेंट को कैसे आग लगानी चाहिए?

Question

मैंने इस समस्या को कुछ बार चलाया है और मैं पहले इस्तेमाल किए गए समाधानों से खुश नहीं हूं।

मेरे पास एक धुंधला ईवेंट वाला एक इनपुट बॉक्स है जो इसकी सामग्री को मान्य करता है और एक बटन जो क्लिक पर इनपुट बॉक्स भर देगा। समस्या बटन पर क्लिक करके इनपुट ब्लर इवेंट को आग लगती है और फिर बटन क्लिक ईवेंट होता है, इसलिए बटन द्वारा डाली गई सामग्री मान्य नहीं होती है।

http://jsfiddle.net/jakecr/dL3K3/

मैं जानता हूँ कि यह सही व्यवहार है देखें, लेकिन मैं एक साफ रास्ता समस्या को हल पाने के लिए सोच भी नहीं सकते।

Answer 1

हमें काम पर एक ही समस्या थी। हमने के अंत में क्या पता लगाया था कि मूसडाउन घटना ब्लर इवेंट से पहले आग लग जाएगी, जिससे आप सत्यापन से पहले सामग्री सेट कर सकते हैं या सत्यापन को पूरी तरह से ध्वज का उपयोग करके प्रक्रिया को रद्द कर सकते हैं।

जांच इस बेला मैं अपने उदाहरण का उपयोग किया http://jsfiddle.net/dL3K3/31/

$(function(){ 
    var flag = true; 
    $('input').blur(function(){ 
     if(!$(this).val() && flag){ 
      alert("Grrr, It's empty"); 
     } 
    }); 

    $('button').mousedown(function(){ 
     flag = false; 
    });  
    $('button').mouseup(function(){ 
     flag = true; 
     $('input').val('content').focus(); 
    }); 

}); 

-Edit-

@mclin के रूप में सुझाए गए, mousedown घटना का उपयोग करने और preventDefault कलंक व्यवहार नहीं कर पाएगा। और तुम सिर्फ मूल क्लिक करें घटना बरकरार छोड़ सकते हैं -

http://jsfiddle.net/dL3K3/364/

$(function(){ 
    $('input').blur(function(){ 
     if(!$(this).val()){ 
      alert("Grrr, It's empty"); 
     } 
    }); 

    $('button').mousedown(function(e){ 
     e.preventDefault(); 
    });  
    $('button').click(function(){ 
     $('input').val('content'); 
    }); 

}); 

यह समाधान थोड़ा क्लीनर और ज्यादातर मामलों के लिए बेहतर हो सकता है बस ध्यान दें कि यदि आप इसका इस्तेमाल आप करेंगे preventDefault और का कलंक वर्तमान में कोई अन्य तत्व फोकस चालू है लेकिन ज्यादातर उपयोग मामलों के लिए जो कोई मुद्दा नहीं होना चाहिए।

Answer 2

अपने स्वयं के फ़ंक्शन में इनपुट सत्यापन तर्क को अलग करें जिसे ब्लर ईवेंट द्वारा स्वचालित रूप से और फिर इनपुट ईवेंट में मान संशोधित करने के बाद क्लिक ईवेंट द्वारा दोनों कहा जाता है। सच है कि आपका सत्यापन तर्क दो बार बुलाया जाएगा, लेकिन मैं बहुत अधिक परिवर्तन किए बिना इसके चारों ओर एक रास्ता नहीं देख रहा हूं।

jQuery का उपयोग कर उदाहरण:

$('input').blur(function() { 
    validate(this); 
}); 

$('submit').click(function() { 
    //modify the input element 
    validate(inputElement); 
}); 

var validate = function(obj) { 
    // validate the object 
} 

Answer 3

यह भी मदद कर सकता है:

एक टाइमर है कि कलंक घटना कार्रवाई में देर होने से पहले ही बटन क्लिक करें घटना आग सेट करें।

// Namespace for timer var setTimer = { timer: null } 

    $('input,select').blur(function() { 
     setTimer.timer = setTimeout(function() { 
      functionCall(); 
     }, 1000); 
    }); 

    $('input,select').focus(function() { 
     setTimer.timer = setTimeout(function() { 
      functionCall(); 
     }, 1000); 
    }); 

    $("#btn").click(function() { 
     clearTimeout(setTimer.timer); 
     functionCall(); 
    }); 

Answer 4

चाल कलंक का उपयोग करें और घटनाओं क्लिक करने के लिए है, क्योंकि वे हमेशा पहले कलंक के क्रम में प्रदर्शन कर रहे हैं नहीं है, दूसरे पर क्लिक करें। इसके बजाय आपको यह जांचना चाहिए कि जब तत्व का ध्यान केंद्रित हो गया है, क्योंकि यह क्लिक के बाद ही होता है।

मुझे लगता है मैं इस एक के लिए एक सुरुचिपूर्ण समाधान है:

var alreadyValidated = 'true'; 

setInterval(function(){ 
    if(document.activeElement.id != 'validation-field-id'){ 
     if(alreadyValidated=='false'){ 
      alreadyValidated = 'true'; 
      validate(document.activeElement);  
     } 
    } 
    else { 
     alreadyValidated = 'false'; 
    } 
}, 200); 

इन दिनों सभी आधुनिक ब्राउज़रों का समर्थन document.activeElement।

Answer 5

मेरे पास योनी जहां की तुलना में बेहतर समाधान है: कॉल की रोकथाम घटना के बटन पर रोकें।ऑनब्लूर कभी नहीं होता है इसलिए आप क्लिक ईवेंट में जो कुछ भी करने के लिए स्वतंत्र हैं।

यह बेहतर है क्योंकि यह माउस के बजाए माउस पर चीजों को घटाने से क्लिक व्यवहार को नहीं बदलता है, जो अप्रत्याशित हो सकता है।

Answer 6

कभी-कभी माउसअप पर बाल वस्तु प्राप्त करना उपयोगी होता है, लेकिन माता-पिता अपने बच्चों को धुंधला करना चाहते हैं। हम बच्चों तत्वों के छिपने रद्द कर सकते हैं, तो जब तक प्रतीक्षा करें हमारे mouseup होता है, तो तब होता है जब हम तैयार

js

var cancelHide = false; 

$('.my-input').blur(function() { 
    if (!cancelHide) { 
     $('.my-item').hide(); 
    } 
}); 

$('.my-input').click(function() { 
    $('.my-item').show(); 
}); 

$('.my-item').mousedown(function() { 
    cancelHide = true; 
}); 

$('.my-item').mouseup(function() { 
    var text = $(this).text(); 
    alert(text); 
    cancelHide = false; 
    $('.my-input').blur(); 
}); 

एचटीएमएल

<input type="text" class="my-input"/> 
<div class="my-item">Hello</div> 
<div class="my-item">Lovely</div> 
<div class="my-item">World</div> 

हैं कलंक मजबूर

सीएसएस

.my-item { 
    display:none; 
} 

https://jsfiddle.net/tic84/on421rxg/

सूची आइटम पर क्लिक करने से केवल mouseup पर सूचित करेंगे, माता पिता के कलंक पर उन्हें