सफारी और क्रोम में काम नहीं कर रहे jQuery का उपयोग कर फ़ोकस पर पाठ का चयन करना

Question 1

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

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

Question 2

यह ऑनमाउसअप ईवेंट है जो चयन को अचयनित कर रहा है, इसलिए आपको बस जोड़ना होगा:

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

Question 3

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

Question 4

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

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

Question 5

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

इससे बचने के लिए और फिर से काम करने के लिए पाठ चयन प्राप्त करने के लिए, आप FOCUS पर एक ध्वज सेट कर सकते हैं, इसे 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);
});

Question 6

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

मैंने इस स्टैक पोस्ट में एक बेहतर सुधार पाया, जिसमें वह समस्या नहीं है और सभी ब्राउज़रों में काम करता है।

Question 7

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

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

Question 8

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

    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);

Question 9

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()मोबाइल सफारी में काम नहीं करता है (देखें iOS उपकरणों (मोबाइल सफारी) पर एक इनपुट क्षेत्र में प्रोग्राम का चयन पाठ )।

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

setSelectionRange()इनपुट प्रकार सेट करने के लिए इसका उपयोग करना महत्वपूर्ण है text, अन्यथा यह क्रोम पर अपवादों को फेंक सकता है ( चयन प्रकार देखें / इनपुट प्रकार पर चयन करें = क्रोम में अब "संख्या" की अनुमति नहीं है )।

Question 10

अगर किसी को फिर से इस समस्या का सामना करना पड़ता है, तो मुझे यहां शुद्ध जेएस समाधान मिला (जो कि इस समय) सभी ब्राउज़रों के लिए काम कर रहा है। मोबाइल

<input type="text" value="Hello world..." onFocus="window.setTimeout(() => this.select());">

(सेटटाइमआउट के बिना) यह सफारी, मोबाइल सफारी और एमएस एज पर काम नहीं कर रहा है)