div 内容可编辑但只读

Question

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

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

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

我尝试对此 div 使用 readonly，但不起作用。

请问有什么建议吗？

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

您可以通过处理“cut”事件并调用其

preventDefault()

方法来阻止用户剪切。这将防止通过任何用户输入（包括浏览器的上下文菜单或编辑菜单）进行剪切，而不仅仅是通过特定的组合键。

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

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

Answer 3

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

使用 div 的 contenteditable 属性使其可编辑或不可编辑 并对表单输入元素使用只读属性。

<element contenteditable="true|false">

<input readonly="readonly" />

Answer 4

这是 React 中的一个示例，但它也适用于基本的 HTML 和 JavaScript，因为我只是利用默认事件。

// import CSS
import './DefaultSettings.css';

// import packages
import React, { Component } from 'react';

// import components

const noop = (e) => {
  e.preventDefault();
  return false;
};

class DefaultSettings extends Component {
  render() {
    return (
      <div className="DefaultSettings"
        contentEditable={true}
        onCut={noop}
        onCopy={noop}
        onPaste={noop}
        onKeyDown={noop}>
      </div>
    );
  }
}

export default DefaultSettings;

Answer 5

将此属性添加到div contenteditable：

onbeforeinput="return false"

Answer 6

要防止 div 中的 ctrl + x（剪切），您需要使用以下 JQuery ：

if (event.ctrlKey && event.keyCode === 88) 
{
   return false;
}

它将防止从 div 中剪切文本。

检查在这里摆弄。

Answer 7

只需删除 contenteditable 属性并 添加 tabindex="-1" 会有一个技巧..

Answer 8

根据用户 ID 条件设置 contentEditable="false"

Answer 9

对于 JavaScript，

document.getElementById(divid).contentEditable = "false";

这会起作用