html - div 内容可编辑但只读

Question

我有一个带有一些文本的 div，我希望当光标悬停在这个 div 上时选择文本。如果我让这个 div 保持原样，当我尝试全选 (CTRL+A) 时，我会选择所有页面内容，即所有正文。

为了摆脱这个，我需要为这个 div 使用 contenteditable 属性。

但我不想让人改文字/复制/剪切等等

我尝试对这个 div 使用只读，但不起作用。

有什么建议吗？

PS1:这个div里面还有其他标签(html内容)，但我不认为这是个问题。

PS2:这里有一个例子:jsfiddle.net/msakamoto_sf/wfae8hzv/- 但有一个问题。你可以剪切文本:(

Answer 1

在 keydown 事件中使用 event.metaKey 来检查是否按下了 ctrl(或 mac 上的 cmd)键。您还必须禁用 cut 和 paste 事件。

<div
  contenteditable="true"
  oncut="return false"
  onpaste="return false"
  onkeydown="if(event.metaKey) return true; return false;">
    content goes here
</div>