我有一个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' 的地方插入符号。
我需要什么代码?非常感谢!
谢谢!我最终编写了一个我自己的函数,它保留了jQuery对象并递归地搜索DOM子代,但这也很有用! – John1984