設置插入符位置在「CONTENTEDITABLE」的div有孩子

我有一個HTML的結構是這樣的：設置插入符位置在「CONTENTEDITABLE」的div有孩子

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

我也有這個功能，可以讓我設置插入符位置在任何地方我想要的DIV中：

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

此代碼工作完全正常，直到我開始添加子標籤(span, b, i, u, strike, sup, sub)到div如

<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);會前 '無聊' 的 'B' 的地方插入符號。

我需要什麼代碼？非常感謝！

來源

2016-04-26 John1984

因此，我遇到了同樣的問題，並決定快速編寫自己的例程，它遞歸地遍歷所有子節點並設置位置。注意這是如何發生DOM節點作爲參數，而不是一個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 
}

我希望這會幫助你的！

來源

2016-04-30 10:41:59 Sorunome

謝謝！我最終編寫了一個我自己的函數，它保留了jQuery對象並遞歸地搜索DOM子代，但這也很有用！ – John1984

它只適用於對象文本 childNodes（0）。所以你必須做它。這裏不是非常標準的代碼，但works.Goal是（我們）的（p）id將輸出對象文本如果確實如此，那麼它可能工作。

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

來源

2016-08-26 08:06:18

設置插入符位置在「CONTENTEDITABLE」的div有孩子

回答

相關問題