1

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.

enter image description here 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?

Mike Badazz
  • 55
  • 1
  • 1
  • 7
  • You can't. Ultimately, I can still open up Developer Tools and modify the text or markup. – BenM Jan 14 '14 at 12:56
  • 1
    What do you mean by “uneditable”? Normal elements cannot be edited by the user in the browser using its normal tools. Any elements can be edited by the user using suitable tools. – Jukka K. Korpela Jan 14 '14 at 13:31

2 Answers2

4

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.

Realitätsverlust
  • 3,941
  • 2
  • 22
  • 46
2

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?

Steini
  • 2,753
  • 15
  • 24