控制内容可编辑元素的文本边界

问题描述

以下是与以下代码有关的场景：

在“ EFGH”上的某处单击鼠标。这会将光标置于Span2内。
按下后箭头，直到光标位于“ E”的前面，但仍在Span2内。
开始打字。

期望的行为：您键入的文本已添加到Span2。

实际行为：您输入的文本已添加到Span1。

基本上，将文本视为附加到前一个元素，而不是插入到当前元素的开头。有什么方法可以更改此设置，以便无论您位于哪个元素中，无论您在元素中的位置如何，都会向其中添加新文本？任何指导将不胜感激。

    
        function doFocus(e) {
            console.log(document.getElementById("div").innerHTML);
        }

   
        div {
            position: absolute;
            left: 100px;
            top: 100px;
            outline: none;
        }

        span {
            border: 1px solid steelblue;
            font-family: 'Courier New';
        }

    <div id="div" contenteditable="true" onmouseup="doFocus(event)" onkeyup="doFocus(event)">
        <span id="span1">ABCD </span><span id="span2">EFGH </span>
    </div>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

contenteditable html javascript