在第一个子目录为span的可内容可编辑div的开头设置插入符号，无法在chrome上正常工作
在第一个子目录为span的可内容可编辑div的开头设置插入符号，无法在chrome上正常工作
提问于 2021-08-16 07:39:37
我有一个可满足的div，它的第一个孩子是span
<div contenteditable="true" style="width: 400px; height: 100px; border: 1px solid black" id="editable"><span
style="color: blueviolet; font-size: large; padding: 5px;">mention</span> text text text<br><br>123
<b>123</b>text text text
</div>然后，我将插入符号设置为div的开头
function setCaret() {
var el = document.getElementById("editable");
var range = document.createRange();
var sel = window.getSelection();
range.setStart(el, 0);
range.setEnd(el.childNodes[0], 0);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);
el.focus();
}然后我输入一个字符。我的期望是字符属于一个独立的文本节点。这对火狐来说是真的，但对chrome并非如此。请给我一些建议。
Chrome：example on chrome
演示地址：https://jsfiddle.net/khiemnguyen/kx61bd0q/
输入新行时也会出现此错误。
回答 1
Stack Overflow用户
发布于 2021-08-16 08:17:51
您可以稍微作弊，在span前插入一个空格，并将其用作childNodes[0]引用。setStartBefore和setEndBefore与您使用的方法没有什么不同，但是使用新的空格时，插入符号与跨度不同。
function setCaret() {
var el = document.getElementById("editable");
el.insertBefore( document.createTextNode( '\u00A0' ),el.firstElementChild );
el.focus();
var range = document.createRange();
var sel = window.getSelection();
range.setStartBefore( el.firstElementChild );
range.setEndBefore( el.firstElementChild );
sel.removeAllRanges();
sel.addRange(range);
}
setCaret();#banana{color:blue;margin:0.25rem;padding:0.25rem;border:1px solid blue}
#editable{width: 400px; height: 100px; margin:5rem; padding:1rem; border: 1px solid black}<div contenteditable="true" id="editable">
<span id='banana'>mention</span>
text text text<br><br>123
<b>123</b>text text text
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68799048
复制相关文章
相似问题
腾讯云开发者
