这是我的代码:
editor.onkeydown = editinput;
var sel = window.getSelection();
function editinput(e) {
var range = sel.getRangeAt(0);
if (e.isComposing || e.keyCode === 229) { //imk
return;
}
if (e.keyCode == 32) { //space
var tnode = range.commonAncestorContainer;
var start = range.startOffset;
var text = tnode.textContent;
var span = document.createElement('span');
span.innerHTML = '------span------';
var firsttextnode = document.createTextNode(text.substring(0, start));
var lasttextnode = document.createTextNode(text.substring(start));
var fragment = new DocumentFragment();
fragment.append(firsttextnode, span, lasttextnode);
tnode.replaceWith(fragment);
range.setEnd(lasttextnode, 0); // here is problem,
range.collapse();
e.stopPropagation(); //bubble
e.preventDefault(); //default.
}
}
[contenteditable=true] {
display: inline-block;
white-space: pre-wrap;
width: 400px;
height: 100%;
}
div, textarea, span {
border: 1px solid rgba(122, 206, 143, 0.966);
margin: 0;
padding: 0;
box-sizing: border-box;
}
<div id="editor" contenteditable="true" class="Weave" tabIndex="1">
samelinesamelinesamelinesamelinesamelinesamelinesame
<span>deerge span</span>oaeueouaoeu <span>disange span</span>
</div>
您会看到:键盘输入将跨度插入。
但是如果我将range.setEnd(lasttextnode, 0);
更改为range.setEnd(lasttextnode, 1)
,它将运行正确;
我尝试了很多方法:
它们都不起作用。
您可以尝试添加仅一个空格的另一个节点,然后在该节点上设置setEnd。
var firsttextnode = document.createTextNode(text.substring(0, start));
var lasttextnode = document.createTextNode(text.substring(start));
var emptyNode = document.createTextNode(' ');
var fragment = new DocumentFragment();
fragment.append(firsttextnode, span, lasttextnode, emptyNode);
tnode.replaceWith(fragment);
range.setEnd(emptyNode, 1);
range.collapse();
https://jsfiddle.net/63s1tgyw/
它将超出范围。这就是您想要实现的目标吗?