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 r

Answer 1

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>

Answer 2

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.

Answer 3

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

Answer 4

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