Make content in DIV uneditable

Question

I want to make the contents within a DIV uneditable but still viewable.

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

The DIV holds the contents of an 'included' file within it. I would like the contents to be viewable but not editable or clickable.

The content of the DIV looks as above.

NB: The text and textarea elements are not in the included file that's in the DIV

Everything in the DIV should be viewable as it is but nothing should be clickable/editable. How can i achieve/implement this?

Answer 1

Well, you could make all elements in a div container uneditable via JQuery if you want it fast and dynamic.

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

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

For more security you have to validate everything serversided anyway if it is a form anyway.

But are input elements nesessary anyway if the content is for read only?

Answer 2

A div is uneditable in general. If you want a textbox which is uneditable, add "readonly":

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

Edit: Or you can block it via CSS with the properties user-select:

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

Remember that this is NOT a validation, i can modify whats inside with firebug or similar tools.