CSS或JavaScript中的readonly div

Question

我需要使用CSS或JavaScript或Jquery 制作'只读div '.不仅是文本框和所有.全div.该div包含任何内容(图像,其他div,文本框,...)

这应该由所有浏览器支持.

任何的想法？

Answer 1

您可以pointer-events: none;用来禁用某些元素上的鼠标DOM交互(如点击,悬停等).例:

div {
    pointer-events: none;
}

<div>
    <input type="text" value="value" />
    <br />
    <textarea>value</textarea>
</div>

但是,即使pointer-events: none;存在,仍然可以使光标聚焦于元素(或它的子元素).这意味着如果我们将光标焦点移动到<input />标签上,则可以编辑该值.

示例:尝试单击<input />标签,然后按键盘中的选项卡,光标焦点将在输入上,使其可编辑.

要使<input />标记完全不可编辑,请readonly在标记上添加属性.下面是使用jQuery执行此操作的简单示例.prop().您还可以根据需要将属性直接放在标记上.

$("input, textarea").prop("readonly", true);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type="text" value="value" />
  <br />
  <textarea>value</textarea>
</div>

Answer 2

遗憾的是,你不能用CSS做这个,你是readonly在HTML元素的属性之后.您可以使用JavaScript轻松完成您想要的任务,这是jQuery的一个示例.

的jsfiddle

HTML

<div class="readonly">
    <input type="text" />
    <div><input type="checkbox" /> Blah</div>
    <textarea>abc</textarea>
</div>

JavaScript的

$(document).ready(function() {
    $('.readonly').find('input, textarea, select').attr('readonly', 'readonly');
});