div contentEditable但Readonly

Question

我有一个带有一些文本的div,我希望当光标悬停此div时选择文本.如果我让这个div原样,当试图选择所有(CTRL + A)然后我选择所有页面内容,这意味着所有正文.

为了摆脱这个,我需要为这个div使用contenteditable属性.

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

我尝试使用readonly这个div,但不起作用.

有什么建议吗？

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

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

Answer 1

event.metaKey在keydown事件中使用以检查是否按下了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>

Answer 2

将 contenteditable 设置为 false，它应该可以工作！就这么简单。

对 div 使用 contenteditable 属性使其可编辑或不可编辑，并对表单输入元素使用 readonly attr。

<element contenteditable="true|false">

<input readonly="readonly" />

Answer 3

您可以通过处理“cut”事件并调用其方法来阻止用户剪切preventDefault()。这将防止通过任何用户输入（包括浏览器的上下文菜单或编辑菜单）进行剪切，而不仅仅是通过特定的组合键。

此示例使用 jQuery，因为您的 jsFiddle 使用它：

$("#editablediv").on("cut", function(e) {
    e.preventDefault();
});