Question

所以我想要一个contenteditable div的功能（通过键盘的文本选择是主要的），但我不想让用户编辑文本 - 我假设readonly="readonly"可以工作，但是可悲的是，它没有。

我们知道是否有办法吗？ contenteditable div可能在（<p>'，<h1>'内有嵌套标签。

我想避免使用textarea（这就是它的用途），因为它不允许我做其他我需要做的事情。

有没有一个很好的方法来做到这一点没有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

您可以在myCounter += 1中添加asp:Panel，并且无法访问面板内的div控件。

Answer 4

要使div内的所有控件都锁定或解锁，请尝试以下操作：

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

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

使ContentEditable div只读？

4 个答案: