div contentEditable but Readonly - html

Question

I have a div with some text and I want when the cursor is hover this div to select the text. If I let this div as it is, when trying to select all (CTRL+A) then I select all page content, meaning all body text.
To get rid of this, I need to use contenteditable attribute for this div.
But I don't want to let people to change the text / copy / cut and so on
I try to use readonly for this div, but doesn't working.
Any advice please ?
PS1: This div has also other tags inside (html content), but I don't think that this is a problem.
PS2: An example is here: jsfiddle.net/msakamoto_sf/wfae8hzv/ - but with a problem. You can cut the text :(

Answer 1

Use event.metaKey in the keydown event to check if ctrl (or cmd on mac) keys are being pressed. You also have to disable the cut and paste events.
<div
contenteditable="true"
oncut="return false"
onpaste="return false"
onkeydown="if(event.metaKey) return true; return false;">
content goes here
</div>

Answer 2

You can prevent the user from cutting by handling the "cut" event and calling its preventDefault() method. This will prevent cut with any user input (including the browser's context menu or edit menu), not just via a particular key combination.
This example uses jQuery because your jsFiddle uses it:
$("#editablediv").on("cut", function(e) {
e.preventDefault();
});

Answer 3

set contenteditable to false and it should work !! that simple.
use contenteditable attribute for div to make it editable or not
and use readonly attr for form input elements.
<element contenteditable="true|false">
<input readonly="readonly" />

Answer 4

Here's an example in React, but it would work with basic HTML and JavaScript as well because I'm just leveraging the default events.
// 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

To prevent ctrl + x (Cut) from div you need to use following JQuery :
if (event.ctrlKey && event.keyCode === 88)
{
return false;
}
It will prevent to cut text from div.
Check Fiddle Here.

Answer 6

on user id condition set contentEditable="false"

Answer 7

for JavaScript,
document.getElementById(divid).contentEditable = "false";
this will work