Сделать ContentEditable div только для чтения?

Question

Поэтому я хочу, чтобы функции contenteditable div (основной выбор был выделен с помощью клавиатуры), но я не хочу, чтобы пользователь мог редактировать текст - я предположил, что readonly="readonly" будет работать, но, к сожалению, это не так.

Мы знаем, есть ли способ сделать это? Внутри contenteditable div могут быть вложенные теги (<p>"S, <h1>"S).

Я хочу избежать текстовой области (для этого она и нужна), так как она не позволяет мне делать другие вещи, которые мне нужны.

Есть хороший способ сделать это без JavaScript? А если нет, то есть ли небольшой фрагмент кода javascript, который по-прежнему позволяет копировать, выделять и т. Д.?

Благодарю.

Вот пример: http://codepen.io/anon/pen/dxeAE

Answer 1

Я сделал JQuery решение / обходной путь. Что делает, так это предотвращает действие по умолчанию при нажатии клавиши:

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

Вы также можете попробовать это, простое решение javascript

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

Это позволяет выбирать с помощью клавиш со стрелками и копировать их.

Answer 3

Чтобы сделать все элементы управления в div заблокированными или разблокированными, попробуйте это:

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

---

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

Answer 4

Вы можете, вероятно, добавить asp:Panel в div и сделать panel.Enabled = false Элементы управления внутри панели не будут доступны.