在contenteditable div中添加Canvas后无法输入、光标消失如何解决？

核心问题 #

你遇到的输入失效、光标消失问题，根源在于两点：

• Canvas是替换型元素，浏览器无法在Canvas内部放置编辑光标；
• 你的Canvas未设置宽高，默认尺寸极小却占据了容器焦点区域，再加上容器内只有Canvas这一个元素，浏览器找不到能放置光标的文本节点，自然无法触发输入。

具体修复步骤 #

1. 给Canvas设置明确宽高
   避免默认尺寸干扰布局，让它在编辑区域有明确占位，修改CSS：

canvas {
    background-color: green;
    width: 200px;
    height: 150px;
    /* 可选：设为行内块，让文本能环绕Canvas排列 */
    display: inline-block;
    vertical-align: middle;
}

2. 给可编辑容器添加文本节点
   在Canvas前后留空或添加空格，给浏览器提供光标定位的文本区域，修改HTML：

<div class="editor" contenteditable> <canvas></canvas> </div>

（注意Canvas前后的空格，这会成为光标初始落脚点，之后就能正常输入内容）

3. 可选：限制Canvas的交互优先级
   如果仍出现光标被Canvas抢占的情况，给Canvas添加pointer-events: none;，让鼠标事件穿透到下方的可编辑容器：

canvas {
    /* 其他样式 */
    pointer-events: none;
}

内容的提问来源于stack exchange，提问作者make