javascript - CSS 或 JavaScript 中的只读 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 />标签，然后在键盘上按Tab，光标焦点将在输入上，使其可编辑。

---

要使<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');
});

Answer 3

恐怕，你不能用 CSS 控制元素的行为。

CSS 代表 Cascading Style Sheets - 它仅用于样式元素。

---

但是你可以使用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);