Chrome在contenteditable="plaintext-only"模式下按回车插入双换行及删除异常的问题咨询

开发者阿泽

2026-4-14

我现在在做一个混合模式的文本框：用户可以通过脚本插入富文本结构化项，其余时候就是普通纯文本输入。我本来觉得contenteditable="plaintext-only"刚好能匹配需求，大部分场景运行都正常，但遇到了一个棘手的问题：当光标放在两个结构化元素之间按回车时，就会出现异常行为，具体可以看下面的代码片段：

相关代码

CSS 样式

.semiStructuredInputStructuredItem {
    :after {
        content: " "
    }

    user-select: all;
}

HTML 结构

<div contenteditable="plaintext-only" style="/* white-space: pre; */">
    <div class="semiStructuredInputStructuredItem" data-semi-structured-index="0" contenteditable="false" style="display: inline-block; margin-left: 2px; margin-right: 2px;">
        <div style="background: rgb(235, 244, 245); padding: 2px;">Developer, Test (Mr)</div>
    </div>
    <div class="semiStructuredInputStructuredItem" data-semi-structured-index="1" contenteditable="false" style="display: inline-block; margin-left: 2px; margin-right: 2px;">
        <div style="background: rgb(235, 244, 245); padding: 2px;">Demo, (Dr)</div>
    </div>
    <br>
</div>

具体异常问题

第一个问题：Chrome中按下回车时，会插入两个换行而不是预期的一个，而且第二个结构化元素会被挤到下一行。这不是单纯的视觉问题——Chrome实际会在文本框的内容中生成两个真实的换行符
第二个问题：出现双换行后按删除键，第二个换行被删掉的同时，后面的结构化元素也会被一并删除，但我预期应该只删除换行本身，不会影响到后面的结构化项

我之前了解过white-space属性和这个场景的关联，也尝试过修改这个属性的不同值，但都没有改善问题。想问问有没有办法让这个交互逻辑变得更合理？我想要的理想效果是：