div contentEditable 但只读答案

【问题标题】：div contentEditable but Readonlydiv contentEditable 但只读
【发布时间】：2015-07-28 04:43:51
【问题描述】：

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

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

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

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

有什么建议吗？

PS1：这个div里面也有其他标签（html内容），不过我觉得这不是问题。

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

【问题讨论】：

使用contenteditable="false" 将不允许剪切文本。
是的，不允许使用CTRL + A从div中选择文本。请阅读我的帖子。
哦，好吧，这是 chrome 的问题。我正在Firefox中检查它。在 Firefox 中它可以工作。
我也在 Firefox 中进行测试（版本 37）。这是您在说什么的测试：jsfiddle.net/wq9d66t1。您不能使用 CTRL + A 选择 div 内的文本（仅 div 内的文本）
我使用的是 37.0.2，可以在这里选择。jsfiddle.net/wfae8hzv/17

标签： html contenteditable readonly

【解决方案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>

【讨论】：

这是正确的解决方案，因为关闭内容可编辑会改变标签的外观（即占位符）

【解决方案2】：

这是 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;

【讨论】：

【解决方案3】：

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

这个例子使用了 jQuery，因为你的 jsFiddle 使用了它：

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

【讨论】：

要进一步模仿具有readonly 属性的textarea，您还需要在paste 和keypress 事件上加上preventDefault() 以及cut。

【解决方案4】：

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

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

<element contenteditable="true|false">

<input readonly="readonly" />

【讨论】：

【解决方案5】：

关于用户 id 条件集 contentEditable="false"

【讨论】：

【解决方案6】：

要防止 div 中的 ctrl + x (Cut)，您需要使用以下 JQuery ：

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

它会阻止从 div 中剪切文本。

查看Fiddle Here.

【讨论】：

这不会涵盖用户使用浏览器上下文菜单或编辑菜单中的“剪切”选项的情况。

【解决方案7】：

对于 JavaScript，

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

这会起作用

【讨论】：