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>