如何在只读 div 中显示闪烁的文本光标/插入符号

Question

如何在 div 中显示闪烁的光标（允许通过键盘选择文本）但保持只读（禁止文本输入）？

我知道我可以设置contentEditable在 div 上启用光标，但用户可以编辑内容。我试过将contentEditable和添加readonly到 div 中，但它似乎readonly只对输入元素有效，如 textarea 或 input。

我也尝试过使用 textarea 并将其设置为 readonly 以便它显示光标但不允许文本输入，如下所示：

<textarea readonly>Go ahead and move the cursor here but don't try to add text</textarea>

这是我正在寻找的功能，但我想用 div 或其他一些非输入元素来做到这一点。我愿意使用 3rd 方库。

---

注意：此处的“光标”或“插入符号”指的是指示文本选择开始/结束位置的闪烁线。

Answer 1

干得好 ：） 。您需要做的就是禁用剪切/复制/粘贴和按键事件。

<div
  contenteditable="true"
  oncut="return false"
  onpaste="return false"
  onkeydown="return false;"
  style="user-drag: none;"
  ondragenter="return false;" 
  ondragleave="return false;" 
  ondragover="return false;" 
  ondrop="return false;">
  Inner content
</div>