readonly div in CSS or JavaScript

Question

I need to make 'read-only div' using with CSS or JavaScript or Jquery. Not only text-box and all. Full div. That div contain anything(image, ,other div,text-box,...)

That should support by all Browser.

Any idea?

Answer 1

You could use pointer-events: none; to disable mouse DOM interaction (like click, hover, etc) on certain element. Example:

div {      pointer-events: none;  }

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

However, even though pointer-events: none; is there, it's still possible to make the cursor to be focus on the element (or it's children). Meaning if we move the cursor focus on the <input /> tag, then it's possible to edit the value.

Example: try to click the <input /> tag, then press tab in keyboard, the cursor focus will be on input, making it editable.

---

To make <input /> tag completely un-editable, put readonly attribute on the tag. Below is simple example to do it by using jQuery .prop(). You can also put the attribute directly on the tag, depending on the needs.

$("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>

Answer 2

You can't do this with CSS unfortunately, you're after the readonly attribute on HTML elements. You can pretty easily accomplish what you want using JavaScript, here's an example with 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'); });