'contenteditable' div में सेट कैरट स्थिति बच्चों

Question

है कि मैं इस तरह एक HTML संरचना है:

// Move caret to a specific point in a DOM element 
function SetCaretPosition(object, pos) 
{ 
    // Get key data 
    var el = object.get(0); // Strip inner object from jQuery object 
    var range = document.createRange(); 
    var sel = window.getSelection(); 

    // Set the range of the DOM element 
    range.setStart(el.childNodes[0], pos); 
    range.collapse(true); 

    // Set the selection point 
    sel.removeAllRanges(); 
    sel.addRange(range); 
} 

इस कोड को पूरी तरह से ठीक काम करता है जब तक मैं div जैसे को (span, b, i, u, strike, sup, sub) चाइल्ड टैग जोड़ना शुरू

<div contenteditable="true"> 
    This is some <span class="fancy">plain</span>, boring content. 
</div> 

चीजें अधिक जटिल हो जाती हैं जब ये बच्चे टैग अपने बच्चों के टैग के साथ समाप्त होते हैं उदा।

<div contenteditable="true"> 
    This is some <span class="fancy"><i>plain</i></span>, boring content. 
</div> 

अनिवार्य रूप से, क्या होता है, कि setStart फेंकता एक IndexSizeError जब मैं एक सूचकांक एक बच्चे टैग की शुरुआत की तुलना में अधिक के लिए SetCaretPosition करने की कोशिश है। setStart केवल तब तक काम करता है जब तक कि यह पहले बाल टैग तक नहीं पहुंच जाता।

मुझे क्या चाहिए, SetCaretPosition फ़ंक्शन के लिए इन बच्चों के टैग की अज्ञात संख्या (और संभावित रूप से अज्ञात बाल टैग की अज्ञात संख्या) को संभालने के लिए है ताकि स्थिति को उसी तरह से काम किया जा सके, अगर कोई टैग न हो ।

तो दोनों इस बात के लिए:

<div contenteditable="true">This is some plain, boring content.</div> 

और इस:

<div contenteditable="true"> 
    This is <u>some</u> <span class="fancy"><i>plain</i></span>, boring content. 
</div> 

SetCaretPosition(div, 20); 'उबाऊ' में 'बी' से पहले कैरट कर देगी।

मुझे आवश्यक कोड क्या है? बहुत धन्यवाद!

Answer 1

तो, मुझे एक ही समस्या का सामना करना पड़ रहा था और मैंने अपना खुद का दिनचर्या जल्दी लिखने का फैसला किया, यह सभी बच्चे नोड्स के माध्यम से बार-बार चलता है और स्थिति निर्धारित करता है। नोट कैसे इस तर्क के रूप में एक डोम नोड लेता है, न अपने मूल पोस्ट के रूप में एक jQuery वस्तु करता

// Move caret to a specific point in a DOM element 
function SetCaretPosition(el, pos){ 

    // Loop through all child nodes 
    for(var node of el.childNodes){ 
     if(node.nodeType == 3){ // we have a text node 
      if(node.length >= pos){ 
       // finally add our range 
       var range = document.createRange(), 
        sel = window.getSelection(); 
       range.setStart(node,pos); 
       range.collapse(true); 
       sel.removeAllRanges(); 
       sel.addRange(range); 
       return -1; // we are done 
      }else{ 
       pos -= node.length; 
      } 
     }else{ 
      pos = SetCaretPosition(node,pos); 
      if(pos == -1){ 
       return -1; // no need to finish the for loop 
      } 
     } 
    } 
    return pos; // needed because of recursion stuff 
} 

मुझे आशा है कि यह आपकी मदद करेंगे!

Answer 2

यह केवल वस्तु पाठ के लिए काम childNodes (0) आप it.Here तो बहुत मानक कोड नहीं है बनाने के लिए है, लेकिन works.Goal कि (पी) (हम) होगा उत्पादन वस्तु पाठ की आईडी है तो अगर ऐसा होता है तो यह काम कर सकता है।

<div id="editable" contenteditable="true">dddddddddddddddddddddddddddd<p>dd</p>psss<p>dd</p><p>dd</p> 
<p>text text text</p> 
</div> 
<p id='we'></p> 
<button onclick="set_mouse()">focus</button> 
<script> 
function set_mouse() { 
    var as = document.getElementById("editable"); 
    el=as.childNodes[1].childNodes[0];//goal is to get ('we') id to write (object Text) 
    var range = document.createRange(); 
    var sel = window.getSelection(); 
range.setStart(el, 1); 
range.collapse(true); 
sel.removeAllRanges(); 
sel.addRange(range); 

document.getElementById("we").innerHTML=el;// see out put of we id 
} 
</script>