Make a ContentEditable div read-only?

Question

So I want the features of a contenteditable div (text selection via keyboard being the main one), but I don't want to allow the user to edit the text - I presumed a readonly="readonly" would work, but sadly it doesn't.

Do we know if there's a way to do it? The contenteditable div may have nested tags inside (<p>'s, <h1>'s).

I want to avoid a textarea (that's what this is for), as it doesn't allow me to do other things I need to be able to do.

Is there a nice way to do this without javascript? And if there isn't, is there a small snippet of javascript that will still allow copying, highlighting etc?

Thanks.

Here's an example: http://codepen.io/anon/pen/dxeAE

What is stopping your end user selecting text in a div *without* `contenteditable`? I can use the keyboard for text selection in Chrome... — CodingIntrigue, Oct 14 '14 at 12:17
http://codepen.io/anon/pen/dxeAE here you go. And you cannot select text the way you can in a textarea/contenteditable - I need that functionality without the option to edit :) The key thing here is selecting text with a keyboard, not a mouse - that can obviously be done regardless :) — Matthew Evans, Oct 14 '14 at 12:19

Andreas Furster · Answer 1 · 2017-06-01T12:09:20.380

5

I made a jquery solution/workaround. What is does is prevent the default action when a key is pressed:

$(document).ready(function(){
  $("#editor").on("keypress", function(e) {
      e.preventDefault();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="editor" contenteditable="">
   <h1>Heading</h1>
   <p>Test</p>
</div>

edited Jun 01 '17 at 12:09

answered Oct 14 '14 at 12:29

Andreas Furster

1,558
1
12
28

Interesting, on keypress doesn't take into account shift+ arrow up, arrow down etc (I'd have thought it would block it)? This may well be the perfect solution – Matthew Evans Oct 14 '14 at 12:30
No, i don't know why it doesn't... It was surprising to me to...! – Andreas Furster Oct 14 '14 at 12:31
I'll have to try this in other browsers (except chrome), before confirming this is the answer (I need to test IE7-11), but this may well be it, unless anyone else has another suggestion equally as good/better :) – Matthew Evans Oct 14 '14 at 12:32
IE7 doesn't matter too much, but as long as it's IE8+ :) (believe me, I wish that wasn't the case, it causes much pain!) – Matthew Evans Oct 14 '14 at 12:34
Oh, and another thing... In some browsers (like ie9+ (i think)), you can drag and re-size images... Which is not a key event... – Andreas Furster Oct 14 '14 at 12:35
Ahh that should be fine, I'm 99% sure there'll be no images, just text :) – Matthew Evans Oct 14 '14 at 12:37
This is not really read-only, as it does not prevent Delete, Backspace, Ctrl+V, etc. – Daniel S. Aug 22 '15 at 02:13
Also it won't stop IME edits. (as they use composition*) – Tom Feb 28 '17 at 19:22

score 1 · Answer 2 · answered Oct 14 '14 at 12:35

1

You could also try this, plain javascript solution

document.getElementById('div').onkeydown = function (e) {
    var event = window.event ? window.event : e;
    return !(!~[37, 38, 39, 40].indexOf(e.keyCode) && !e.ctrlKey);
}

This allows selection using arrow keys and copying the same.

answered Oct 14 '14 at 12:35

Salman

9,299
6
40
73

1

Yeah that's what scares me - keyCodes can sometimes be not what you expect – Matthew Evans Oct 14 '14 at 12:38
Oops.. btw, @AndreasFurster your solution doesn't work in Mozilla (latest) for me – Salman Oct 14 '14 at 12:39
Then I could only think of storing initial html in `h` and `return ((this.innerHTML != h) && (this.innerHTML = h))` in an `onkeyup`. That's a shame. :P – Salman Oct 14 '14 at 12:45
I see... Or think about how important it is to select with te keybord on all browsers... You can still select with the cursor in FF... – Andreas Furster Oct 14 '14 at 12:49

score 0 · Answer 3 · edited Nov 23 '16 at 14:08

0

You can probably add an asp:Panel in the div and make the panel.Enabled = false Controls inside panel will not be accessible.

edited Nov 23 '16 at 14:08

jrbedard

3,662
5
30
34

answered Sep 14 '15 at 19:22

user5335267

1

Laurent Perso · Answer 4 · 2016-09-21T13:06:11.347

0

To make all controls within a div locked or unlocked, try this :

<div id="lockableDiv">
....
</div>

lockDiv = function(lockIt){
    if(lockIt){    
        $('#lockableDiv :input').attr('readonly', true);
    }else{
        $('#lockableDiv :input').removeAttr('readonly');
    }
}

edited Sep 21 '16 at 13:06

answered Sep 19 '16 at 13:25

Laurent Perso

55
8

Please edit with more information. Code-only and "try this" answers are discouraged, because they contain no searchable content, and don't explain why someone should "try this". – abarisone Sep 19 '16 at 13:58

Make a ContentEditable div read-only?

4 Answers4

Linked