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

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

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

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

Answer 3

要防止来自div的ctrl + x（Cut），您需要使用以下JQuery：

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

它会阻止从div中删除文本。

检查Fiddle Here.

Answer 4

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

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

None

Answer 5

for JavaScript，

<强> document.getElementById(divid).contentEditable = "false";

这将起作用

Answer 6

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

div contentEditable但只读

6 个答案: