Stwórz element ContentEditable div-only-read?

Question

Tak więc chcę funkcji contenteditable div (wybór tekstu za pomocą klawiatury jest głównym), ale nie chcę pozwolić użytkownikowi na edycję tekstu - domyślam się, że zadziała readonly="readonly", ale niestety nie .

Czy wiemy, czy istnieje sposób, aby to zrobić? Element div może zawierać znaczniki zagnieżdżone (<p> 's, <h1>).

Chcę uniknąć textarea (po to jest to), ponieważ nie pozwala mi robić innych rzeczy, które muszę być w stanie zrobić.

Czy jest to dobry sposób, aby to zrobić bez javascript? A jeśli tak nie jest, czy istnieje mały fragment javascript, który nadal będzie pozwalał na kopiowanie, podświetlanie itp.?

Dzięki.

Oto przykład: http://codepen.io/anon/pen/dxeAE

Answer 1

Zrobiłem rozwiązanie jquery/obejścia. Co to ma to uniemożliwić działanie domyślne, gdy klawisz jest wciśnięty:

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

Można również spróbować tego, zwykły javascript rozwiązanie

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

umożliwia to wybór za pomocą klawiszy strzałek i kopiowanie to samo.

Answer 3

Prawdopodobnie można dodać asp:Panel w div i sprawić, że panel kontrolny panel.Enabled = false będzie niedostępny.

Answer 4

aby wszystkie kontrole w ramach div zablokować lub odblokować, spróbuj tego:

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

---

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