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

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

我知道我可以将

contentEditable

设置为在div上启用光标，但用户可以编辑内容。我尝试将

contentEditable

和

readonly

添加到div中，但似乎

readonly

仅对输入元素有效，如textarea或input

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

继续并将光标移到此处，但不要尝试添加文本

此处：）。您只需禁用剪切/复制/粘贴和按键事件

内在内容

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

const uneditables=Array.from(
document.queryselectoral（“.editable，但不是真的”）
);
const doNothing=e=>e.preventDefault（）；
不可编辑。forEach（元素=>{
setAttribute（“contentEditable”，true）；
元素。addEventListener（“oncut”，doNothing，false）；
元素。addEventListener（“onpaste”，doNothing，false）；
元素。addEventListener（“向下键”，不显示任何内容，错误）；
});
我是来这里的
你不能编辑我
我生来就是要留下来的
因为我是，而我不是
你想和我有什么关系吗
你的臭指针
这基本上就是我要找的，但它禁用了文本选择。为此，我想我必须深入研究onkeydown事件，确保当用户点击箭头键或shift时，它不会成为默认值。这似乎是一个很好的解决方案。要实际检测并允许
ctrl+c
您可以使用@BradyDowling。如果它起作用，请接受答案。我仍然可以编辑内容。选择文本并将其移动（拖放）到句子的另一部分。此外，内联JS是一个坏习惯，甚至会引发
不安全内联
标志<代码>addEventListener

应用于分离关注点。