我有这个代码
elementSpan = document.createElement('span').className = 'mainSpan';
elementSpan.innerHTML = '<span class="childSpan">A</sapn>';
range.insertNode(elementSpan);
range.setStartAfter(elementSpan); //the problem am having
现在我将游标设置elementSpan
为在contentcontentable div中后的游标之后elementSpan
,但不是游标于游标之后的游标,而是游标在游标内的文本之后A
,<span class="childSpan">
但我希望它在游标之后elementSpan
。请任何知道如何执行此操作的人?
再次经历了您的问题,这是我能上班的最接近的问题。这将在末尾创建一个虚拟对象a
,
并将光标移到其后。两者a
和
都很重要,因为没有这些浏览器(Safari,Chrome),由于进行了一些优化,迫使键入的文本进入最后一个元素。代码将光标移动到下一个元素(如果已经存在),可以通过删除来将其删除if
。
我不是范围/选择API的专家。期待看到其他有趣的答案。
elementSpan = document.createElement('span');
elementSpan.className = 'mainSpan';
document.getElementById('ce').appendChild(elementSpan);
elementSpan.innerHTML = '<span id="childSpan">Another text</span>'; //the problem am having
setCursorAfterElement(document.getElementById('childSpan'));
function setCursorAfterElement(ele) {
if (!ele.nextElementSibling) {
var dummyElement = document.createElement('a')
dummyElement.appendChild(document.createTextNode('\u00A0'))
ele.parentNode.appendChild(dummyElement)
}
var nextElement = ele.nextElementSibling
nextElement.tabIndex=0
nextElement.focus()
var r = document.createRange();
r.setStart(nextElement.childNodes[0], 1);
r.setEnd(nextElement.childNodes[0], 1);
var s = window.getSelection();
s.removeAllRanges();
s.addRange(r);
//document.execCommand("delete", false, null);
}
#childSpan {
border: 1px solid red;
margin: 0px;
}
<div id="ce" contenteditable="true">
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句