सावधान समीक्षा के बाद, मैं इसे इस धागे के भीतर एक दूर क्लीनर समाधान के रूप में प्रस्तावित करता हूं:
$("input").focus(function(){
$(this).on("click.a keyup.a", function(e){
$(this).off("click.a keyup.a").select();
});
});
समस्या:
यहाँ थोड़ा सा स्पष्टीकरण दिया गया है:
सबसे पहले, आइए घटनाओं के क्रम पर एक नज़र डालें जब आप एक क्षेत्र में माउस या टैब करते हैं।
हम इस तरह से सभी प्रासंगिक घटनाओं को लॉग इन कर सकते हैं:
$("input").on("mousedown focus mouseup click blur keydown keypress keyup change",
function(e) { console.log(e.type); });
नोट : मैंने इस समाधान को उपयोग करने के clickबजाय बदल दिया हैmouseup क्योंकि यह बाद में घटना पाइपलाइन में होता है और ऐसा लगता है कि @ Jocie की टिप्पणी के अनुसार फ़ायरफ़ॉक्स में कुछ समस्याएँ पैदा कर रहा है
कुछ ब्राउज़र mouseupया clickघटनाओं के दौरान कर्सर को रखने का प्रयास करते हैं। यह समझ में आता है क्योंकि आप एक स्थिति में कैरेट शुरू करना चाहते हैं और कुछ पाठ को उजागर करने के लिए ऊपर खींच सकते हैं। जब तक आप वास्तव में माउस को नहीं उठाते तब तक यह कार्यवाहक स्थिति के बारे में कोई पदनाम नहीं कर सकता है। तो कार्य जो संभालता हैfocus करना बहुत जल्दी प्रतिक्रिया देने के लिए किया जाता है, जिससे ब्राउज़र आपकी स्थिति को ओवरराइड कर सकता है।
लेकिन बकवास यह है कि हम वास्तव में फोकस घटना को संभालना चाहते हैं। यह हमें पहली बार पता चला है कि किसी ने मैदान में प्रवेश किया है। उस बिंदु के बाद, हम उपयोगकर्ता चयन व्यवहार को ओवरराइड करना जारी नहीं रखना चाहते हैं।
समाधान:
इसके बजाय, focusईवेंट हैंडलर के भीतर , हम श्रोताओं को आग लगने के बारे clickमें (क्लिक इन) और keyup(टैब इन) घटनाओं के लिए जल्दी से संलग्न कर सकते हैं।
नोट : एक टैब ईवेंट की कीप वास्तव में नए इनपुट फ़ील्ड में आग लगाएगी , न कि पिछले एक पर
हम केवल एक बार आग लगाना चाहते हैं। हम उपयोग कर सकते हैं .one("click keyup), लेकिन यह ईवेंट हैंडलर को प्रत्येक ईवेंट प्रकार के लिए एक बार कॉल करेगा । इसके बजाय, जैसे ही माउसअप या कीप दबाया जाता है हम अपने फ़ंक्शन को कॉल करेंगे। पहली चीज़ जो हम करेंगे, वह है दोनों के लिए हैंडलर निकालना। इस तरह यह कोई फर्क नहीं पड़ता कि हम टैब करते हैं या मूस करते हैं। फ़ंक्शन को एक बार बिल्कुल निष्पादित करना चाहिए।
नोट : अधिकांश ब्राउज़र टैब ईवेंट के दौरान स्वाभाविक रूप से सभी टेक्स्ट का चयन करते हैं, लेकिन जैसा कि एनिमेटेडगिफ़ ने बताया है , हम अभी भी keyupईवेंट को संभालना चाहते हैं , अन्यथा mouseupईवेंट अभी भी हमारे द्वारा टैब किए जाने के आस-पास रहेगा। हम दोनों को सुनते हैं ताकि हम इसे चालू कर सकें। चयन को संसाधित करते ही श्रोताओं से दूर हो जाना।
अब, हम कॉल कर सकते हैं select() ब्राउज़र के चयन के बाद इसलिए हम डिफ़ॉल्ट व्यवहार को ओवरराइड करना सुनिश्चित करते हैं।
अंत में, अतिरिक्त सुरक्षा के लिए, हम इवेंट नेमस्पेस को फंक्शन्स में जोड़ सकते हैं mouseupऔर keyupइसलिए यह .off()विधि किसी अन्य श्रोता को नहीं हटा सकती है जो कि प्ले में हो सकता है।
IE 10+, FF 28+, और Chrome 35+ में परीक्षण किया गया
वैकल्पिक रूप से, यदि आप jQuery को एक फ़ंक्शन केonce साथ विस्तारित करना चाहते हैं, तो यह कहा जाता है कि किसी भी संख्या में घटनाओं के लिए एक बार आग लग जाएगी :
$.fn.once = function (events, callback) {
return this.each(function () {
var myCallback = function (e) {
callback.call(this, e);
$(this).off(events, myCallback);
};
$(this).on(events, myCallback);
});
};
फिर आप इस तरह से कोड को सरल बना सकते हैं:
$("input").focus(function(){
$(this).once("click keyup", function(e){
$(this).select();
});
});