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执行此操作，而是在HTML元素的readonly属性之后。您可以使用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');
});

Answer 3

我担心，你无法用CSS控制元素行为。

CSS代表层叠样式表 - 它仅用于样式元素。

但您可以使用JavaScript。

上面未经测试的jQuery示例：

$('#myDiv').children().attr('readonly', true);

Answer 4

试试以下内容：

脚本部分：

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#previewDiv :input").attr("disabled", true); 
});
</script>

HTML部分：

<div id="previewDiv">
<select>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
</select>
<input type="text" name="test" value="test">
</div>

我认为这可以帮助您解决问题。

Answer 5

$("div").prop("readonly", true);

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

Answer 6

$（'div *'）。prop（'disabled'，true）;

CSS或JavaScript中的readonly div

6 个答案: