CSS或JavaScript中的只读div

Question

我需要使用CSS、JavaScript或Jquery制作“只读 div”。不仅是文本框，而是整个 div。该div包含任何内容（图像、其他div、文本框等）。

这应该被所有浏览器支持。

有什么想法吗？

- KarSho

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>

- novalagung

---

你是否使用此选项来分割元素？ - KarSho

这是一种并不真正有效的方法。这些标签并非只读，因为您可以通过按Tab键进行编辑。此外，“pointer-events”是比较新的属性，支持程度不是很广泛。 - Daniel Imms

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

- Daniel Imms

---

<a> 标签和 <div> 标签是只读的，您是指停止所有互动吗？ - Daniel Imms

是的，所有的事情...如果包括JavaScript动作，那就太太好了。 - KarSho

通常，这是通过在所有内容上覆盖一个<div>来完成的，以便点击事件不会穿过。使用Noval的pointer-events:none;与此readonly属性解决方案相结合也可以实现相同的效果。我认为用户仍然可以切换到<a>标签。 - Daniel Imms

Answer 3

很抱歉，你无法使用CSS来控制元素的行为。

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

---

但是你可以使用JavaScript。

未经测试的jQuery示例如下：

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

- Edward Ruchevits

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>

我认为这可能有助于您解决问题。

- John Peter

Answer 5

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

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

- sairamch

Answer 6

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

的意思是将所有 div 元素下的子元素都设置为禁用状态。

- Rohanrt0254

---

请将以下与程序有关的内容从英语翻译成中文。仅返回翻译后的文本：请同时添加解释，以便未来读者了解您的解决方案是如何以及为什么起作用的。 - Not A Bot