browser independent readonly?

Question

Is there a way in HTML, JavaScript or jQuery to make an input element "readonly", i.e.

• the user can read it
• the user can copy its content to the clipboard
• the user can't change it

that will work in all browsers? I know there is a "readonly" attribute but it's not supported in all browsers.

I'm not asking about security aspects, just user experience.

Answer 1

if you using jQuery (as you put in tag) it cross-browser:

$(...your input ...).attr('readonly','readonly'); 

edit: from http://www.w3schools.com/tags/att_input_readonly.asp

The readonly attribute is supported in all major browsers.

Answer 2

One way is to fake it:

<p class="fake_input">The readonly Value</p>
<input type="hidden" name="real_input" value="The readonly Value" />

And if you wanted it to look like a disabled input box, you could style it and stuff.

Just remember that people can change hidden inputs willy nilly.

Answer 3

Although the readOnly attribute is case insensitive in html it must be written 'readOnly' in js. It works when directly assigned in all browsers from and including IE6, but the way you assign it can be browser specific.

element.setAttribute('readOnly','readOnly') does not work in older browsers, but element.readOnly='readOnly' (or any truthy value') works x-browser.