Ein ContentEditable-Div schreibgeschützt machen?

Question

Also ich möchte die Funktionen eines zufrieden stellbar div (Textauswahl über die Tastatur ist die wichtigste), aber ich möchte nicht zulassen, dass der Benutzer den Text bearbeiten - ich vermutete eine readonly="readonly" würde funktionieren, aber leider nicht .

Wissen wir, ob es einen Weg gibt, es zu tun? Das contenteditable div kann verschachtelte Tags innerhalb haben (<p> 's, <h1>' s).

Ich möchte eine Textarea vermeiden (das ist, wofür das ist), da es mir nicht erlaubt, andere Dinge zu tun, die ich tun muss.

Gibt es eine gute Möglichkeit, dies ohne Javascript zu tun? Und wenn nicht, gibt es einen kleinen JavaScript-Ausschnitt, der das Kopieren, Hervorheben usw. erlaubt?

Danke.

Hier ist ein Beispiel: http://codepen.io/anon/pen/dxeAE

Answer 1

ich eine jquery Lösung/Abhilfe gemacht. Was das ist die Standardaktion verhindern, wenn eine Taste gedrückt wird:

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

Sie können diese versuchen, einfache JavaScript-Lösung

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

Diese Auswahl mit den Pfeiltasten kann und das gleiche kopieren.

Answer 3

Sie können wahrscheinlich asp:Panel in der div hinzufügen und machen die panel.Enabled = false Controls Innenseite Panel nicht zugänglich sein.

Answer 4

auf alle Bedienelemente innerhalb eines div gesperrt oder entsperrt zu machen, versuchen Sie dies:

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

---

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