div内容可读，但只读

Question

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

为了消除这个，我需要为这个div使用contentitable属性。

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

我尝试对这个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>

Answer 2

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

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

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

Answer 3

将contenteditable设置为false，它应该可以工作!那么简单。

使用contentitable属性来决定div是否可编辑并对表单输入元素使用只读attr。

<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

要防止ctrl + x (Cut) fromdiv，您需要使用以下JQuery:

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

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

Answer 7

on user id condition set contentitable ="false"

Answer 8

对于JavaScript

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