Question

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

我知道我可以设置contentEditable来启用div上的光标，但是用户可以编辑内容。我尝试将contentEditable和readonly都添加到div中，但似乎readonly仅对输入元素有效，例如textarea或input。

我也尝试过使用textarea并将其设置为只读，这样它可以显示光标，但不允许输入文本，例如：

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

这是我正在寻找的功能，但我想使用div或其他一些非输入元素来实现。我愿意使用第三方库。

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

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>

Answer 2

在Vanilla JavaScript中，这是如何执行此操作的最简单示例。我在这里使用一个类，但是如其他答案所示，您可以将其更改为实际属性或任何适合您的链接。

  const uneditables = Array.from(
        document.querySelectorAll(".editable-but-not-really")
  );

  const doNothing = e => e.preventDefault();

  uneditables.forEach(element => {
    element.setAttribute("contentEditable", true);
    element.addEventListener("oncut", doNothing, false);
    element.addEventListener("onpaste", doNothing, false);
    element.addEventListener("keydown", doNothing, false);
  });

<div class="editable-but-not-really">I am here to stay</div>
<div class="editable-but-not-really">You cannot edit me</div>
<div class="editable-but-not-really">I was born to stay</div>
<div class="editable-but-not-really">As I am, and I don't</div>
<div class="editable-but-not-really">want anything to do with</div>
<div class="editable-but-not-really">your stinky pointer</div>

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

2 个答案: