关于contenteditable = "true"
,我想在此删除.icon
是不可能的。 (.Icon
总是排在最后。)
我正在尝试以下代码。
<h2>
<span class="txt" contenteditable="true">World</span>
</h2>
<h2>
<span class="txt" contenteditable="true">Hello<span class="icon" contenteditable="false">★</span></span>
</h2>
<style>
h2 {
word-break: break-all;
}
span.txt {
border-bottom: 1px solid black;
cursor: text;
width: 100%;
height: 100%;
display: inline-block;
}
</style>
<script>
document.addEventListener ('click', event=> {
let selection = event.view.getSelection();
let target = event.target;
let doc = target.ownerDocument;
let icon = target.closest ('.icon');
if (icon) {
let e = icon.previousSibling;
if (e) {
let range = doc.createRange ();
let len = e.length;
range.setStart (e, len);
range.setEnd (e, len);
selection.removeAllRanges ();
selection.addRange (range);
}
}
}, false);
</script>
示例:https://jsfiddle.net/46fjdaxz/
上面的代码使得删除.icon
成为不可能。
在“世界区域”中,单击任意位置时会显示插入符号,但在“Hello区域”后面单击时不会显示插入符号。
如何在“Hello区域”中显示插入符号?
提前感谢您的帮助。
即使在你的代码中,我也可以删除图标:只需点击图标后按下退格键,就可以删除它。
但为了你的目的,我可以建议这个:https://jsfiddle.net/bardc04j/
只需将可编辑部分与不可编辑部分分开即可
<h2>
<span class="txt" contenteditable="true">Hello</span>
<span class="icon" contenteditable="false">★</span>
</h2>
此外,我只是删除了您的CSS,将图标放在文本旁边。
希望能有所帮助。