代碼目標：當用戶按空格時，自動輸入一個跨度，然后用戶可以繼續(xù)輸入，當我在開發(fā)工具中跟蹤它們時，range.setEnd(lasttextnode, 0);和 range.collapse() 以正確的方式運行，但是鍵盤輸入不正確，我在文本上設置了插入符號，想要在跨度之后插入字符，但是輸入出現(xiàn)在剛剛插入的上一個跨度中。這是我的代碼：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>您可以看到：鍵盤輸入將在剛剛插入的范圍內(nèi)。但是如果我將range.setEnd(lasttextnode, 0);更改為range.setEnd(lasttextnode, 1)，它將正確運行；我嘗試了很多方法：范圍.collapse();range.setStart(lasttextnode,0)sel.removeAllRanges();sel.collapse(lasttextnode,0)range.setStartBefore(lasttextnode);范圍.setStartAfter(span);所有這些都不是工作。只需在lasttextnode之前插入一個空格就可以部分解決問題，但這不是我的目標，我想在span后面輸入一些東西。
2 回答
ITMISS
TA貢獻1871條經(jīng)驗 獲得超8個贊
您可以嘗試在跨度和最后一個文本節(jié)點之間插入一個空字符（例如 \u200B）。然后，當您將光標移動到最后一個文本節(jié)點之前時，它位于 span 標記之外。但請記住在將結果插入數(shù)據(jù)庫之前刪除結果中的空字符。
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 emptyNode = document.createTextNode('\u200B');
var firsttextnode = document.createTextNode(text.substring(0, start));
var lasttextnode = document.createTextNode(text.substring(start));
var fragment = new DocumentFragment();
fragment.append(firsttextnode, span, emptyNode, 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>
隔江千里
TA貢獻1906條經(jīng)驗 獲得超10個贊
您可以嘗試添加另一個節(jié)點，只需一個空格，然后在該節(jié)點上 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/
它將聚焦在跨度之外。這是您想要實現(xiàn)的目標嗎？
- 2 回答
- 0 關注
- 307 瀏覽
添加回答
舉報
0/150
提交
取消