CSS 或 JavaScript 中的只读 div答案

【问题标题】：readonly div in CSS or JavaScriptCSS 或 JavaScript 中的只读 div
【发布时间】：2013-03-09 02:33:56
【问题描述】：

我需要使用 CSS 或 JavaScript 或 Jquery 制作“只读 div”。不仅是文本框和所有。完整的div。该 div 包含任何内容（图像、其他 div、文本框、...）

所有浏览器都应该支持。

有什么想法吗？

【问题讨论】：

标签： javascript jquery css html readonly

【解决方案1】：

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

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

但你可以使用JavaScript。

未经测试的jQuery 上面的例子：

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

【讨论】：

【解决方案2】：

您可以使用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>

【讨论】：

你用这个选项来div吗？
这有点像 hack，但实际上并不奏效。这些标签不是只读的，因为您可以对它们进行标签并根据您的心愿进行编辑。另外pointer-events 相对较新，并未得到广泛支持。

【解决方案3】：

不幸的是，你不能用 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');
});

【讨论】：

<a>标签和<div>标签是只读的，你的意思是停止所有交互吗？
是的，所有的东西......如果包含 Javascript 动作意味着，它太好了。
通常这是通过在所有内容上覆盖<div> 来完成的，这样点击事件就不会通过。使用 Noval 的 pointer-events:none; 与此 readonly 属性解决方案可以实现相同的目的。我相信用户仍然可以使用标签来标记<a>。

【解决方案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>

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

【讨论】：

【解决方案5】：

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

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

【讨论】：

【解决方案6】：

$('div *').prop('disabled',true);

【讨论】：

还请为您的答案添加解释，以便未来的读者了解您的解决方案如何以及为何起作用。