readonly contenteditable demo

readonly contenteditable demo

by ian_smithz

HTML

<div style="width: 300px; height: 200px; border: 1px solid gray" contenteditable="true" id="editablediv">abc
  
aa</div>
<div style="width: 300px; height: 200px; border: 1px solid gray" contenteditable="true" id="mind-input-a">
aa</div>
<input type="button" name="copyAsText" value="copy content as text"><br>
<input type="button" name="copyAsHtml" value="copy content as html"><br>
<textarea name="t1" rows="20" cols="30"></textarea>
<textarea class="t2" rows="20" cols="30"></textarea>

JavaScript

$("#editablediv").keydown(function (event) {
    if (event.ctrlKey) {
        // allow Ctrl-A, Ctrl-(any arrow key) combinations
        return true;
    }
    // keycode: http://www.programming-magic.com/file/20080205232140/keycode_table.html
    if (33 <= event.keyCode && event.keyCode <= 40) {
        return true;
    }
    return false;
});
$('#editablediv2').keyup(function(){
    $('.t2').text($('#editablediv2').text());
});
$('input:button[name="copyAsText"]').click(function(){
    $(':input[name="t1"]').text($('#editablediv').text());
});
$('input:button[name="copyAsHtml"]').click(function(){
    $(':input[name="t1"]').text($('#editablediv').html());
});