Text input readonly attribute not recognized in IE7?

Question

I am setting readonly="readonly" (in other words, true) via javascript:

document.getElementById("my_id").setAttribute("readonly", "readonly");

This is having the intended effect (making the field no longer editable, but its contents are submitted with the form) in FF, Safari and Chrome, but not for IE7. In IE7 I can still modify the contents of the text input field.

I have tried setting ("readonly", "true") as well, which works in all three other browsers that I am testing, but which IE7 also ignores.

Does anyone have experience with trying to do this with IE7? I do not want to use the disabled attribute as I want the value within the text input field to be submitted with the form.

Answer 1

This is a browser-specific issue, and one that isn't likely to go away.

Your best bet is to put the value you want into a hidden input and ignore the original readonly text box value entirely.

Answer 2

Did you try this?

document.getElementById("my_id").readOnly = true;

Answer 3

try:

document.getElementById("my_Id").setAttribute("readOnly","readonly")

it is readOnly, O is capital!

Answer 4

Thanks TheVillageIdiot, i was facing the same problem..it would have any problems in IE8 but in IE7 it showed a problem... The capital 'O' did the trick...

Answer 5

<script type="text/javascript">

function blah(txt) {
   var text = document.getElementById(txt).value;
   if(text.length > 4 && document.getElementById('chk').checked == false) {

   // *********    NOT WORKING WITH IE   *************** //
   //document.getElementById("ta").setAttribute('readOnly','readonly');
   //document.getElementById("ta").readOnly="readOnly";
   // ******** ---   **********//

   //document.getElementById("ta").disabled = true;   //  for disable textArea
   document.getElementById("ta").blur(); // comment this when above line is uncommented or visa-versa
   document.getElementById('chkBox').style.display = "block";
   }
}

function unable() {
  // document.getElementById("ta").disabled = false; // to unable textArea -- uncomment when disabling is used or visa-versa
   document.getElementById('ta').focus();
   document.getElementById('chkBox').style.display = "none";
}

</script>


<textarea id="ta" onkeydown="blah('ta')" ></textarea>
<div id="chkBox" style="display:none"><label> Please check this to continue....</label><input type="checkbox" id="chk" onclick="unable()"></div>