किसी सामग्री के अंत में कर्सर स्थिति सेट करने की आवश्यकता है संपादन योग्य div, चयन और श्रेणी वस्तुओं के साथ समस्या

Question

मैं इस पल के लिए क्रॉस-ब्राउज़र संगतता के बारे में भूल रहा हूं, मैं बस इसे काम करना चाहता हूं। मैं जो कर रहा हूं वह typegreek.com पर स्थित एक स्क्रिप्ट को संशोधित करने की कोशिश कर रहा है (और आपको शायद इसे जानने की आवश्यकता नहीं है) मूल स्क्रिप्ट here पाई गई है। मूल रूप से यह तब होता है जब आप वर्णों में टाइप करते हैं, यह उस चरित्र को परिवर्तित करता है जिसे आप ग्रीक वर्णों में टाइप कर रहे हैं और इसे स्क्रीन पर प्रिंट करते हैं। मैं जो करने की कोशिश कर रहा हूं वह सामग्री पर काम करने के लिए है। योग्य div (यह केवल Textareas के लिए काम करता है)

मेरी समस्या इस कार्य के साथ है: उपयोगकर्ता एक कुंजी टाइप करता है, इसे ग्रीक कुंजी में परिवर्तित कर दिया जाता है, और किसी फ़ंक्शन पर जाता है, यह किसी के माध्यम से सॉर्ट हो जाता है, और जहां यह समाप्त होता है वह है जहां मैं div समर्थन जोड़ सकता हूं। यहां मेरे पास अब तक है,

myField div है, myValue ग्रीक चरित्र है।

//Get selection object... 
var userSelection 
if (window.getSelection) {userSelection = window.getSelection();} 
else if (document.selection) {userSelection = document.selection.createRange();} 

//Now get the cursor position information... 
var startPos = userSelection.anchorOffset; 
var endPos = userSelection.focusOffset; 
var cursorPos = endPos; 

//Needed later when reinserting the cursor... 
var rangeObj = userSelection.getRangeAt(0) 
var container = rangeObj.startContainer 

//Now take the content from pos 0 -> cursor, add in myValue, then insert everything after myValue to the end of the line. 
myField.textContent = myField.textContent.substring(0, startPos) + myValue + myField.textContent.substring(endPos, myField.textContent.length); 

//Now the issue is, this updates the string, and returns the cursor to the beginning of the div. 
//so that at the next keypress, the character is inserted into the beginning of the div. 
//So we need to reinsert the cursor where it was. 

//Re-evaluate the cursor position, taking into account the added character. 
    var cursorPos = endPos + myValue.length; 

    //Set the caracter position. 
    rangeObj.setStart(container,cursorPos) 

अब, यह तब तक काम करता है जब तक मैं मूल पाठ के आकार से अधिक टाइप नहीं करता। कहो मेरे हाथ में div में 30 अक्षर थे। यदि मैं उस 30 से अधिक टाइप करता हूं, तो यह वर्ण 31 जोड़ता है, लेकिन कर्सर को 30 पर वापस रखता है। मैं pos.31 पर वर्ण 32 टाइप कर सकता हूं, फिर pos.32 पर वर्ण 33 टाइप कर सकता हूं, लेकिन अगर मैं चरित्र 34 को डालने का प्रयास करता हूं, तो चरित्र जोड़ता है, और कर्सर को 32 पर वापस सेट करता है। मुद्दा यह है कि नए चरित्र को जोड़ने के लिए फ़ंक्शन को कर्सर में परिभाषित किया गया है जो सीमा में परिभाषित किया गया है। कोई विचार?

Answer 1

इस क्रॉस-ब्राउज़र को टेक्स्टटेरा की तुलना में संतोषजनक div में करना आसान है। निम्नलिखित मानते हैं कि आपके संतुष्ट div में "ग्रीक" की एक आईडी है।

var greekChars = { 
    "a": "\u03b1" 
    // Add character mappings here 
}; 

function convertCharToGreek(charStr) { 
    return greekChars[charStr] || "[Greek]"; 
} 

function insertTextAtCursor(text) { 
    var sel, range, textNode; 
    if (window.getSelection) { 
     sel = window.getSelection(); 
     if (sel.getRangeAt && sel.rangeCount) { 
      range = sel.getRangeAt(0); 
      range.deleteContents(); 
      textNode = document.createTextNode(text); 
      range.insertNode(textNode); 

      // Move caret to the end of the newly inserted text node 
      range.setStart(textNode, textNode.length); 
      range.setEnd(textNode, textNode.length); 
      sel.removeAllRanges(); 
      sel.addRange(range); 
     } 
    } else if (document.selection && document.selection.createRange) { 
     range = document.selection.createRange(); 
     range.pasteHTML(text); 
    } 
} 

var div = document.getElementById("greek"); 

div.onkeypress = function(evt) { 
    evt = evt || window.event; 
    var charCode = (typeof evt.which == "undefined") ? evt.keyCode : evt.which; 
    if (charCode) { 
     var charStr = String.fromCharCode(charCode); 
     var greek = convertCharToGreek(charStr); 
     insertTextAtCursor(greek); 
     return false; 
    } 
} 

Answer 2

मुझे लगता है कि आप अंत ऑफ़सेट से बाहर स्टार्ट ऑफ़सेट सेट कर सकते हैं।

जब आप पाठ डाल रहे हों तो प्रारंभ ऑफसेट से पहले आपको अंत ऑफ़सेट सेट करना चाहिए।

rangeObj.setEnd(container, cursorPos); 
rangeObj.setStart(container,cursorPos);