javascript - 使 DIV 中的内容不可编辑

Question

我想让 DIV 中的内容不可编辑但仍可查看。

<div id="committee"><?php include 'committee_members_list.php'; ?></div>

DIV 在其中包含“包含”文件的内容。我希望内容可以查看，但不可编辑或点击。

DIV 的内容如上所示。

注意：文本和文本区域元素不在 DIV 中包含的文件中

DIV 中的所有内容都应该可以查看，但没有任何内容可以点击/编辑。我怎样才能实现/实现这一点？

Answer 1

div 通常是不可编辑的。如果您想要一个不可编辑的文本框，请添加“只读”：

<input type="textbox" name="test" readonly>

编辑：或者您可以通过 CSS 使用用户选择的属性阻止它：

.unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

请记住，这不是验证，我可以使用 firebug 或类似工具修改里面的内容。

Answer 2

好吧，如果您希望它快速和动态，您可以通过 JQuery 使 div 容器中的所有元素都不可编辑。

<div id="committee">
    <?php include 'committee_members_list.php'; ?>
</div>

<script type="text/javascript">
    $("#committee").each(function() {
        $(this).attr("readonly", "1");
    });
</script>

为了提高安全性，无论如何，如果它是一个表单，您必须验证所有服务器端的东西。

但是，如果内容是只读的，输入元素是否仍然必要？