javascript - 将 ContentEditable div 设置为只读？

Question

所以我想要一个 contenteditable div 的功能(主要是通过键盘选择文本)，但我不想让用户编辑文本 - 我假设是 readonly="readonly"会起作用，但遗憾的是它不起作用。

我们知道是否有办法做到这一点吗？ contenteditable div 可能在内部嵌套标签( <p> 的，<h1> 的)。

我想避免使用文本区域(这就是它的用途)，因为它不允许我做我需要做的其他事情。

有没有不用 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>