शुरू से ही एक टेक्स्टारिया में कैरट कॉलम (पिक्सल नहीं) की स्थिति कैसे प्राप्त करें?

Question

<textarea>जावास्क्रिप्ट का उपयोग करने में आपको कैरेट की स्थिति कैसे मिलती है ?

उदाहरण के लिए: This is| a text

यह वापस आना चाहिए 7।

आपको कर्सर / चयन के आसपास के तार वापस करने के लिए यह कैसे मिलेगा?

उदाहरण के लिए: 'This is', '', ' a text'।

यदि शब्द "है" पर प्रकाश डाला गया है, तो यह वापस आ जाएगा 'This ', 'is', ' a text'।

Comments

इस प्रश्न को देखें: stackoverflow.com/questions/164147/… और यदि आपके पास नई

— अंकतालिकाएँ होंगी

आप jQuery का उपयोग कर रहे हैं, तो आप उपयोग कर सकते हैं jQuery कैरट प्लगइन $ ( 'पाठ क्षेत्र') getSelection () शुरू करते हैं।। Plugins.jquery.com/plugin-tags/caret @ ++

— redochka

ब्लॉग पर एक अच्छा समाधान मिला ।vishalon.net / index.php / … मैंने इसे फ़ायरफ़ॉक्स और क्रोम में परीक्षण किया, और दोनों में काम किया। लेखक का कहना है कि यह IE + ओपेरा में भी काम करता है।

— pycoder112358

सरल उपयोग textarea.selectionStart, textarea. selectionEnd, textarea.setSelectionRange developer.mozilla.org/en-US/docs/Web/API/HTMLTextAreaElement

— EAndreyF

Answer 1

फ़ायरफ़ॉक्स, सफारी (और अन्य गेको आधारित ब्राउज़र) के साथ आप आसानी से textarea.selectionStart का उपयोग कर सकते हैं, लेकिन IE के लिए जो काम नहीं करता है, इसलिए आपको ऐसा कुछ करना होगा:

function getCaret(node) {
  if (node.selectionStart) {
    return node.selectionStart;
  } else if (!document.selection) {
    return 0;
  }

  var c = "\001",
      sel = document.selection.createRange(),
      dul = sel.duplicate(),
      len = 0;

  dul.moveToElementText(node);
  sel.text = c;
  len = dul.text.indexOf(c);
  sel.moveStart('character',-1);
  sel.text = "";
  return len;
}

( पूरा कोड यहाँ )

मैं भी आपको jQuery के FieldSelection Plugin की जांच करने की सलाह देता हूं, यह आपको ऐसा करने की अनुमति देता है और बहुत कुछ ...

संपादित करें: मैंने वास्तव में उपरोक्त कोड को फिर से लागू किया है:

function getCaret(el) { 
  if (el.selectionStart) { 
    return el.selectionStart; 
  } else if (document.selection) { 
    el.focus(); 

    var r = document.selection.createRange(); 
    if (r == null) { 
      return 0; 
    } 

    var re = el.createTextRange(), 
        rc = re.duplicate(); 
    re.moveToBookmark(r.getBookmark()); 
    rc.setEndPoint('EndToStart', re); 

    return rc.text.length; 
  }  
  return 0; 
}

यहां एक उदाहरण देखें ।

Comments

जब कैरेट को खाली लाइन पर रखा जाता है, तो यह कैरेट पोजीशन के बीच अंतर नहीं करता है। देखें stackoverflow.com/questions/3053542/...

— टिम नीचे

यह उत्तर रिक्त लाइनों की समस्या से नहीं निपटता है।

— टिम डाउन

मैं इसे कंटेंटेबल डिव के लिए कैसे उपयोग कर सकता हूं?

— मुहम्मेट गोटकरक अयान

आप इस उत्तर को थोड़ा सा समझना चाह सकते हैं, ऐसा Safari (and other Gecko based browsers)लगता है कि सफारी गेको का उपयोग करता है। गेको मोजिला का इंजन है; सफारी WebKit का उपयोग करता है।

— बेकार कोड

स्थिति 0 पर परीक्षण विफल होगा if (el.selectionStart) { return el.selectionStart; }...

— ओएम

Answer 2

5 सितंबर 2010 को अपडेट किया गया

यह देखते हुए कि इस मुद्दे के लिए सभी को यहां निर्देशित किया जा रहा है, मैं अपने उत्तर को एक समान प्रश्न के साथ जोड़ रहा हूं, जिसमें इस उत्तर के समान कोड है, लेकिन रुचि रखने वालों के लिए पूरी पृष्ठभूमि के साथ:

IE के document.selection.createRange में अग्रणी या खाली लाइनों को शामिल करना शामिल नहीं है

लाइन ब्रेकिंग के लिए आईई में मुश्किल है, और मैंने ऐसा कोई समाधान नहीं देखा है जो इसे सही ढंग से करता हो, जिसमें इस प्रश्न का कोई अन्य उत्तर भी शामिल है। हालाँकि, यह संभव है, निम्न फ़ंक्शन का उपयोग करते हुए, जो आपको एक <textarea>पाठ के भीतर चयन के प्रारंभ और अंत (जो एक कैरेट के मामले में समान हैं) को लौटा देगा <input>।

ध्यान दें कि textarea IE में ठीक से काम करने के लिए इस फ़ंक्शन के लिए ध्यान केंद्रित करना चाहिए। यदि संदेह है, तो focus()पहले textarea की विधि को बुलाओ ।

function getInputSelection(el) {
    var start = 0, end = 0, normalizedValue, range,
        textInputRange, len, endRange;

    if (typeof el.selectionStart == "number" && typeof el.selectionEnd == "number") {
        start = el.selectionStart;
        end = el.selectionEnd;
    } else {
        range = document.selection.createRange();

        if (range && range.parentElement() == el) {
            len = el.value.length;
            normalizedValue = el.value.replace(/\r\n/g, "\n");

            // Create a working TextRange that lives only in the input
            textInputRange = el.createTextRange();
            textInputRange.moveToBookmark(range.getBookmark());

            // Check if the start and end of the selection are at the very end
            // of the input, since moveStart/moveEnd doesn't return what we want
            // in those cases
            endRange = el.createTextRange();
            endRange.collapse(false);

            if (textInputRange.compareEndPoints("StartToEnd", endRange) > -1) {
                start = end = len;
            } else {
                start = -textInputRange.moveStart("character", -len);
                start += normalizedValue.slice(0, start).split("\n").length - 1;

                if (textInputRange.compareEndPoints("EndToEnd", endRange) > -1) {
                    end = len;
                } else {
                    end = -textInputRange.moveEnd("character", -len);
                    end += normalizedValue.slice(0, end).split("\n").length - 1;
                }
            }
        }
    }

    return {
        start: start,
        end: end
    };
}

Comments

क्षमा करें, लेकिन ' रेंज एंड& रेंज.parentElement () ' का क्या अर्थ है?

— 21

यदि हम IE में कार्यवाहक का पद प्राप्त करना चाहते हैं तो एक समस्या है (यदि चयन रिक्त है)। इस स्थिति में यह 0 के रूप में शुरू होता है और अंत में स्ट्रिंग की लंबाई होती है (यदि हम श्रेणी और& range.parentElement () == el ) के बजाय सही का उपयोग करते हैं ।

— 21

@sergzach: यह range && range.parentElement() == elजांचने के लिए है कि क्या चयन पाठ्य सामग्री के भीतर है और आवश्यक है। फ़ंक्शन को तब तक कोई समस्या नहीं है जब तक कैरेट पोजीशन प्राप्त नहीं हो जाती है, जब तक कि टेक्स्टारिया पर ध्यान केंद्रित नहीं किया जाता है । यदि अनिश्चित है, तो कॉल focus()करने से पहले टेक्सारिया की विधि को कॉल करें getInputSelection()। मैं उत्तर के लिए एक नोट जोड़ूंगा।

— टिम डाउन

@ समय: चयन शुरू करने के लिए एक दिव्य तत्व पर क्लिक करते समय "प्रारंभ" और "अंत" हमेशा समान होते हैं।

— मिशा मोरोस्को

@ मिशा: यह फ़ंक्शन की गलती नहीं है: यह वही है जो वास्तव में फ़ंक्शन द्वारा निष्पादित होने पर चुना जाता है। आप सतर्क बॉक्स को हटाने के बाद इसे नेत्रहीन देख सकते हैं। जैसा कि मैंने आपके हालिया प्रश्न के उत्तर में उल्लेख किया है, दो संभावित वर्कअराउंड mousedownघटना का उपयोग कर रहे हैं या तत्व unselectable="on"को जोड़ रहे हैं <div>।

— टिम डाउन

Answer 3

मैंने IE में गाड़ी के रिटर्न के लिए उपरोक्त फ़ंक्शन को संशोधित किया है। यह निष्कलंक है लेकिन मैंने अपने कोड में इसके साथ कुछ ऐसा किया है, इसलिए यह व्यावहारिक होना चाहिए।

function getCaret(el) {
  if (el.selectionStart) { 
    return el.selectionStart; 
  } else if (document.selection) { 
    el.focus(); 

    var r = document.selection.createRange(); 
    if (r == null) { 
      return 0; 
    } 

    var re = el.createTextRange(), 
    rc = re.duplicate(); 
    re.moveToBookmark(r.getBookmark()); 
    rc.setEndPoint('EndToStart', re); 

    var add_newlines = 0;
    for (var i=0; i<rc.text.length; i++) {
      if (rc.text.substr(i, 2) == '\r\n') {
        add_newlines += 2;
        i++;
      }
    }

    //return rc.text.length + add_newlines;

    //We need to substract the no. of lines
    return rc.text.length - add_newlines; 
  }  
  return 0; 
}

Answer 4

यदि आपको IE का समर्थन करने की आवश्यकता नहीं है, तो आप उपयोग कर सकते हैं selectionStartऔर selectionEndविशेषताओं का textarea।

केवल स्थिति का उपयोग करने के लिए selectionStart:

function getCaretPosition(textarea) {
  return textarea.selectionStart
}

चयन के आसपास के तार पाने के लिए, निम्नलिखित कोड का उपयोग करें:

function getSurroundingSelection(textarea) {
  return [textarea.value.substring(0, textarea.selectionStart)
         ,textarea.value.substring(textarea.selectionStart, textarea.selectionEnd)
         ,textarea.value.substring(textarea.selectionEnd, textarea.value.length)]
}

JSFiddle पर डेमो ।

HTMLTextAreaElement डॉक्स भी देखें ।