div contentEditable but Readonly

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 :(

use `contenteditable="false"` will not allow to cut the text. — ketan, May 16 '15 at 08:55
Yes, and not allowed to select the text from the div using CTRL + A. Please read my post. — Simona, May 16 '15 at 08:58
Ohh ok it's issue in chrome. I am checking it in firefox. In firefox it's working. — ketan, May 16 '15 at 09:03
I'm testing in firefox too ( Version 37 ). Here is a test for what are you saying: https://jsfiddle.net/wq9d66t1/. You can not select the text inside div using CTRL + A (only the text inside div) — Simona, May 16 '15 at 09:06
I am using 37.0.2 and i can able to select here.http://jsfiddle.net/wfae8hzv/17/ — ketan, May 16 '15 at 09:10
Please understand the role of CTRL + A. Select here http://jsfiddle.net/wfae8hzv/18/ the text inside div using CTRL + A. You will also select the text " text outside div " witch is outside div. Just use CTRL + A short keys. This is actually my problem. I want to be able to select only the text inside div using CTRL + A — Simona, May 16 '15 at 09:24
Ok so you need something like: http://jsfiddle.net/wfae8hzv/20/ ? — ketan, May 16 '15 at 09:53
For what it's worth, I just came across the "contentReadOnly" command on https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content which seems to be exactly what OP was looking for. I haven't been able to get it working, though, so maybe I'm misinterpreting the docs…? — balu, Sep 12 '18 at 18:39

drdator · Answer 1 · 2016-08-29T15:03:20.650

14

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>

edited Aug 29 '16 at 15:03

answered Aug 18 '16 at 09:20

drdator

361
3
7

this is the correct solution since turning off content editable changes the appearance of the tag (ie placeholders) – evanjmg Nov 12 '21 at 13:19

Tim Down · Accepted Answer · 2015-05-21T08:50:49.180

3

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();
});

edited May 21 '15 at 08:50

answered May 17 '15 at 11:00

Tim Down

318,141
75
454
536

1

To further imitate a `textarea` with a `readonly` attribute, you would need to also `preventDefault()` on the `paste` and `keypress` events along with `cut`. – Edgar Sanchez Aug 14 '17 at 05:00

score 3 · Answer 3 · answered Mar 31 '16 at 09:53

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" />

answered Mar 31 '16 at 09:53

Dinnu Buddy

369
1
3
13

score 2 · Answer 4 · answered Sep 15 '18 at 12:19

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;

score 1 · Answer 5 · answered Jun 29 '23 at 11:35

1

add this attribute to div contenteditable:

onbeforeinput="return false"

answered Jun 29 '23 at 11:35

Vitaly

11
1

score 0 · Answer 6 · answered May 16 '15 at 10:02

0

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.

answered May 16 '15 at 10:02

ketan

19,129
42
60
98

That won't cover the case when the user use the "Cut" option from the browser's context menu or edit menu. – Tim Down May 17 '15 at 10:57

score -1 · Answer 7 · answered Aug 13 '21 at 12:30

-1

on user id condition set contentEditable="false"

answered Aug 13 '21 at 12:30

Athul K Suresh

7
1

score -3 · Answer 8 · answered Apr 26 '18 at 08:28

-3

for JavaScript,

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

this will work

answered Apr 26 '18 at 08:28

Jinu

1

div contentEditable but Readonly

8 Answers8

Linked