Thực hiện chỉ đọc div có thể chỉnh sửa nội dung?

Question

Vì vậy, tôi muốn các tính năng của div có thể chỉnh sửa (lựa chọn văn bản qua bàn phím là bàn phím chính), nhưng tôi không muốn cho phép người dùng chỉnh sửa văn bản - tôi giả sử là readonly="readonly". .

Chúng tôi có biết cách nào để làm điều đó không? Div có thể chỉnh sửa có thể có các thẻ lồng nhau bên trong (<p> 's, <h1>' s).

Tôi muốn tránh một textarea (đó là những gì này là cho), vì nó không cho phép tôi làm những việc khác tôi cần để có thể làm.

Có cách nào hay để làm điều này mà không có javascript? Và nếu không có, là có một đoạn nhỏ của javascript mà vẫn sẽ cho phép sao chép, làm nổi bật vv?

Cảm ơn.

Dưới đây là một ví dụ: http://codepen.io/anon/pen/dxeAE

Answer 1

tôi đã thực hiện một giải pháp jquery/workaround. Có gì là không là ngăn chặn hành động mặc định khi một phím được nhấn:

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

Bạn cũng có thể thử loại này, đồng bằng javascript giải pháp

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

này cho phép lựa chọn sử dụng các phím mũi tên và sao chép giống nhau.

Answer 3

Bạn có thể thêm asp:Panel vào số div và làm cho bảng điều khiển panel.Enabled = false bên trong sẽ không thể truy cập được.

Answer 4

Để thực hiện tất cả các điều khiển trong một div khóa hoặc mở khóa, hãy thử này:

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

---

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