सफारी और क्रोम

Question

में काम नहीं कर रहे jQuery का उपयोग करके फोकस पर टेक्स्ट का चयन करना मेरे पास निम्न jQuery कोड (this question के समान) है जो फ़ायरफ़ॉक्स और आईई में काम करता है, लेकिन क्रोम और सफारी में विफल रहता है (कोई त्रुटि नहीं, केवल काम नहीं करता)। कामकाज के लिए कोई विचार?

$("#souper_fancy").focus(function() { $(this).select() }); 

Answer 1

तो तुम सिर्फ जोड़ने की जरूरत है यह, onmouseup घटना है कि चयन का चयन रद्द किया पाने के लिए खड़ी कर रहा है है:

$("#souper_fancy").mouseup(function(e){ 
    e.preventDefault(); 
}); 

Answer 2

यह इनपुट प्रकार = "पाठ" तत्वों के लिए ठीक काम करता है। #souper_fancy किस प्रकार का तत्व है?

$("#souper_fancy").focus(function() { 
    $(this).select(); 
}); 

Answer 3

$('#randomfield').focus(function(event) { 
    setTimeout(function() {$('#randomfield').select();}, 0); 
}); 

Answer 4

इस आईई, फ़ायरफ़ॉक्स, क्रोम में चयन के लिए काम करता है, सफारी, और ओपेरा, यह आपको फ़ायरफ़ॉक्स, क्रोम और सफारी में दूसरी बार क्लिक करके इसे संपादित करने नहीं देगा। पूरी तरह से यकीन नहीं है, लेकिन मुझे लगता है कि यह उन 3 ब्राउज़रों के कारण हो सकता है जो फोकस इवेंट को फिर से जारी कर रहे हों, भले ही फ़ील्ड पहले से ही फोकस कर रहा हो, इस प्रकार आपको वास्तव में कर्सर डालने की इजाजत नहीं देता है (क्योंकि आप इसे फिर से चुन रहे हैं), जबकि आईई में और ओपेरा ऐसा प्रतीत होता है कि ऐसा नहीं कर रहा है इसलिए फोकस इवेंट को फिर से नहीं निकाल दिया गया और इस प्रकार कर्सर डाला गया।

मुझे एक बेहतर फिक्स in this Stack post मिला है जिसमें यह समस्या नहीं है और सभी ब्राउज़रों में काम करता है।

Answer 5

यह क्रोम में भी काम करना चाहिए:

$("#souper_fancy").focus(function() { 
    var tempSouper = $(this); 
    setTimeout(function(){ 
     tempSouper.select(); 
    },100); 
}); 

Answer 6

बस को रोकने डिफ़ॉल्ट mouseup पर हर समय पर होने की पाठ चयन का कारण बनता है। माउस चयन घटना पाठ चयन को साफ़ करने के लिए ज़िम्मेदार है। हालांकि, अपने डिफ़ॉल्ट व्यवहार को रोकने से, आप माउस को टेक्स्ट का चयन रद्द करने में असमर्थ हैं।

इससे बचने के लिए और फिर से काम करने के लिए टेक्स्ट चयन प्राप्त करने के लिए, आप फ़ोकस पर एक ध्वज सेट कर सकते हैं, इसे माउस से पढ़ सकते हैं और इसे रीसेट कर सकते हैं ताकि भविष्य में MOUSEUP ईवेंट अपेक्षित कार्य करेगा।

$("#souper_fancy").focus(function() { 
    $(this).select(); 

    //set flag for preventing MOUSEUP event.... 
    $this.data("preventMouseUp", true); 
}); 

$("#souper_fancy").mouseup(function(e) { 
    var preventEvent = $this.data("preventMouseUp"); 

    //only prevent default if the flag is TRUE 
    if (preventEvent) { 
     e.preventDefault(); 
    } 

    //reset flag so MOUSEUP event deselect the text 
    $this.data("preventMouseUp", false); 
}); 

Answer 7

क्योंकि वहाँ झिलमिलाते है जब आप setTimeout का उपयोग, वहाँ एक और घटना आधारित समाधान है। इस तरह 'फोकस' ईवेंट 'माउसअप' ईवेंट संलग्न करता है और ईवेंट हैंडलर खुद को फिर से अलग करता है।

function selectAllOnFocus(e) { 
    if (e.type == "mouseup") { // Prevent default and detach the handler 
     console.debug("Mouse is up. Preventing default."); 
     e.preventDefault(); 
     $(e.target).off('mouseup', selectAllOnFocus); 
     return; 
    } 
    $(e.target).select(); 
    console.debug("Selecting all text"); 
    $(e.target).on('mouseup', selectAllOnFocus); 
} 

तब पहली घटना

$('.varquantity').on('focus', selectAllOnFocus); 

Answer 8

उपयोग setSelectionRange() एक कॉलबैक के अंदर requestAnimationFrame() के तार:

$(document).on('focus', '._selectTextOnFocus', (e) => { 
    var input = e.currentTarget; 
    var initialType = e.currentTarget.type; 

    requestAnimationFrame(() => { 
     // input.select() is not supported on iOS 
     // If setSelectionRange is use on a number input in Chrome it throws an exception, 
     // so here we switch to type text first. 
     input.type = "text"; 
     input.setSelectionRange(0, Number.MAX_SAFE_INTEGER || 9999); 
     input.type = initialType; 
    }); 
}); 

उपयोग setSelectionRange() बजाय select()select() के बाद से मोबाइल सफारी में काम नहीं करता है (Programmatically selecting text in an input field on iOS devices (mobile Safari) देखें)।

टेक्स्ट चुनने से पहले requestAnimationFrame का उपयोग करना आवश्यक है, अन्यथा कीबोर्ड आईओएस पर आने के बाद सही ढंग से स्क्रॉल नहीं किया जाता है।

setSelectionRange() का उपयोग करते समय इनपुट प्रकार को text पर सेट करना महत्वपूर्ण है, अन्यथा यह क्रोम पर अपवाद फेंक सकता है (selectionStart/selectionEnd on input type="number" no longer allowed in Chrome देखें)।