CODEWITHSUNDEEP
javascriptjquerycsshtmlreadonly
KarSho
KarSho

Reputation: 5746

readonly div in CSS or JavaScript

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?

Upvotes: 36

Views: 117582

Answers (6)

Rohanrt0254
Rohanrt0254

Reputation: 1

$('div *').prop('disabled',true);

Upvotes: 0

novalagung
novalagung

Reputation: 11502

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>

Upvotes: 63

sairamch
sairamch

Reputation: 11

$("div").prop("readonly", true);

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

Upvotes: 0

John Peter
John Peter

Reputation: 2928

Just Try With The Following :

Script Part :

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#previewDiv :input").attr("disabled", true); 
});
</script>

HTML Part :

<div id="previewDiv">
<select>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
</select>
<input type="text" name="test" value="test">
</div>

I think this may help you to resolve your problem.

Upvotes: 3

Daniel Imms
Daniel Imms

Reputation: 50149

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');
});

Upvotes: 8

Edward Ruchevits
Edward Ruchevits

Reputation: 6696

I am afraid, you can't control elements behavior with CSS.

CSS stands for Cascading Style Sheets - it's only for styling elements.

But you can use JavaScript.

Untested jQuery example above:

$('#myDiv').children().attr('readonly', true);

Upvotes: 2

Related Questions