टैग

Question

सहित संतोषजनक div में कैरेट स्थिति प्राप्त करें मेरे पास एक संतोषजनक div है जिसमें मेरे पास एकाधिक टैग (बीआर, बी, यू, i) और टेक्स्ट हैं और मुझे div के सापेक्ष कैरेट स्थिति प्राप्त करने की आवश्यकता है, जिसमें सभी टैग शामिल हैं ।

उदाहरण के लिए:

<div id="h" contenteditable="true">abc<b>def<br>ghi</b>jkl</div> 

कर्सर जी और एच के बीच है, तो मैं कैरट स्थिति की जरूरत है 14. होने की समस्या है कि पाया तरीकों कि एक treeWalker का उपयोग इस मामले में काम नहीं करते । बोल्ड टैग नहीं मिला है ... शायद क्योंकि यह बंद नहीं है। इसके अलावा मैंने कई तरीकों की कोशिश की है लेकिन अभी भी कोई भाग्य नहीं है।

मुझे इसे फ़ायरफ़ॉक्स में काम करने की आवश्यकता है। धन्यवाद।

Answer 1

क्या आपने यह कोशिश की है? Get a range's start and end offset's relative to its parent container

jsfiddle को सीधा लिंक: https://jsfiddle.net/TjXEG/1/

समारोह कोड:

function getCaretCharacterOffsetWithin(element) { 
    var caretOffset = 0; 
    if (typeof window.getSelection != "undefined") { 
     var range = window.getSelection().getRangeAt(0); 
     var preCaretRange = range.cloneRange(); 
     preCaretRange.selectNodeContents(element); 
     preCaretRange.setEnd(range.endContainer, range.endOffset); 
     caretOffset = preCaretRange.toString().length; 
    } else if (typeof document.selection != "undefined" && document.selection.type != "Control") { 
     var textRange = document.selection.createRange(); 
     var preCaretTextRange = document.body.createTextRange(); 
     preCaretTextRange.moveToElementText(element); 
     preCaretTextRange.setEndPoint("EndToEnd", textRange); 
     caretOffset = preCaretTextRange.text.length; 
    } 
    return caretOffset; 
} 

function showCaretPos() { 
    var el = document.getElementById("test"); 
    var caretPosEl = document.getElementById("caretPos"); 
    caretPosEl.innerHTML = "Caret position: " + getCaretCharacterOffsetWithin(el); 
} 

document.body.onkeyup = showCaretPos; 
document.body.onmouseup = showCaretPos; 

Answer 2

सिर्फ इस करना था तो वहाँ है कुछ काम कर समाधान (कुछ परीक्षण की आवश्यकता हो सकती)

मूल विचार यह है:

1. textContent स्थिति इस पद्धति का उपयोग मिलता है: अगर HTML टैग या संस्था का सामना करना पड़ा है, textContent स्थिति

2. के एक तत्व के innerHTML के माध्यम से Get caret (cursor) position in contentEditable area containing HTML content

3. पुनरावृति सामान्य चार जब तक यह के माध्यम से पुनरावृति, तो

जारी रखने के लिए

नमूना यहाँ कोड:

function getHTMLCaretPosition(element) { 
var textPosition = getCaretPosition(element), 
    htmlContent = element.innerHTML, 
    textIndex = 0, 
    htmlIndex = 0, 
    insideHtml = false, 
    htmlBeginChars = ['&', '<'], 
    htmlEndChars = [';', '>']; 


if (textPosition == 0) { 
    return 0; 
} 

while(textIndex < textPosition) { 

    htmlIndex++; 

    // check if next character is html and if it is, iterate with htmlIndex to the next non-html character 
    while(htmlBeginChars.indexOf(htmlContent.charAt(htmlIndex)) > -1) { 
    // console.log('encountered HTML'); 
    // now iterate to the ending char 
    insideHtml = true; 

    while(insideHtml) { 
     if (htmlEndChars.indexOf(htmlContent.charAt(htmlIndex)) > -1) { 
     if (htmlContent.charAt(htmlIndex) == ';') { 
      htmlIndex--; // entity is char itself 
     } 
     // console.log('encountered end of HTML'); 
     insideHtml = false; 
     } 
     htmlIndex++; 
    } 
    } 
    textIndex++; 
} 

//console.log(htmlIndex); 
//console.log(textPosition); 
// in htmlIndex is caret position inside html 
return htmlIndex; 
}