टेक्स्टरेरा मान अपडेट करें, लेकिन कर्सर की स्थिति रखें

Question

मेरे पास एक HTML textarea है जिसे समय-समय पर जावास्क्रिप्ट के माध्यम से अपडेट किया जाएगा।

जब मैं इस कार्य करें:

$("#textarea").val(new_val); 

कर्सर पाठ के अंत करने के लिए ले जाता है।

मैं कर्सर की स्थिति को बदले बिना पाठ को अपडेट करना चाहता हूं। साथ ही, यदि उपयोगकर्ता के पास चयनित टेक्स्ट की एक श्रृंखला है, तो हाइलाइट संरक्षित किया जाना चाहिए।

Answer 1

यहां उन कार्यों की एक जोड़ी है जो सभी प्रमुख ब्राउज़रों में एक टेक्स्ट क्षेत्र में चयन/देखभाल स्थिति प्राप्त और सेट करती हैं।

नोट: यदि आप, IE < = 8 का समर्थन की जरूरत नहीं है बस selectionStart और selectionEnd गुण (MDN) का उपयोग करें। नीचे दिए गए सभी जटिल कोड आईई के पुराने संस्करणों का समर्थन करने के लिए बस वहां हैं।

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

function offsetToRangeCharacterMove(el, offset) { 
    return offset - (el.value.slice(0, offset).split("\r\n").length - 1); 
} 

function setInputSelection(el, startOffset, endOffset) { 
    if (typeof el.selectionStart == "number" && typeof el.selectionEnd == "number") { 
     el.selectionStart = startOffset; 
     el.selectionEnd = endOffset; 
    } else { 
     var range = el.createTextRange(); 
     var startCharMove = offsetToRangeCharacterMove(el, startOffset); 
     range.collapse(true); 
     if (startOffset == endOffset) { 
      range.move("character", startCharMove); 
     } else { 
      range.moveEnd("character", offsetToRangeCharacterMove(el, endOffset)); 
      range.moveStart("character", startCharMove); 
     } 
     range.select(); 
    } 
} 

जब आप पाठ क्षेत्र के मूल्य बदलने के लिए, पहले चयन को बचाने, तो यह बाद में बहाल:

var t = document.getElementById("textarea"); 
var sel = getInputSelection(t); 
t.value = some_new_value; 
setInputSelection(t, sel.start, sel.end);