[英]Set Caret Position in 'contenteditable' div that has children
我有一個這樣的 HTML 結構:
<div contenteditable="true">This is some plain, boring content.</div>
我也有這個 function 允許我將插入符號 position 設置到 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);
}
在我開始向 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>
本質上,當我嘗試將SetCaretPosition
設置為高於子標記開頭的索引時, setStart
會拋出IndexSizeError
。 setStart
僅在到達第一個子標簽之前有效。
我需要的是讓SetCaretPosition
function 處理未知數量的這些子標簽(以及可能未知數量的嵌套子標簽),以便設置 position 的工作方式與沒有標簽時的工作方式相同。
所以對於這兩個:
<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);
會將插入符放在“boring”中的“b”之前。
我需要什么代碼? 非常感謝!
所以,我遇到了同樣的問題,並決定快速編寫自己的例程,它遞歸遍歷所有子節點並設置位置。 注意這是如何將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
}
我希望這對你有所幫助!
如果您要根據可編輯內容的字符索引將插入符號設為 position,最簡單的方法是使用modify
方法:
const position = 6;
const el = document.querySelector('#editable');
const selection = document.getSelection();
if (!selection || !el) return;
// Set the caret to the beggining
selection.collapse(el, 0);
// Move the caret to the position
for (let index = 0; index < position; index++) {
selection.modify('move', 'forward', 'character');
}
不需要遍歷子節點。
它只適用於對象Text childNodes(0)。所以你必須制作它。這里不是那么標准的代碼,但是有效。目的是(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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.