HTML: cursor showing in readonly input text?

Question

Let's say we have a textbox that's readonly, like so:

<input type="text" readonly /> 

In IE 9 and FF 4, when I click on this field, a (non-blinking) cursor appears in the field. In Chrome, however, the cursor does not show. (See for yourself at http://jsfiddle.net/hqBsW/.)

I suppose I understand why IE/FF opt to show the cursor—so the user knows he or she can still select the value in the field.

Nonetheless, it's evidently confusing our users and we would like to change IE/FF to not show the cursor, as Chrome does for readonly fields.

Is there a way to do this?

Answer 1

My solution, from nikmd23's jQuery snippet but with the blur() function that seems to work better

$('input[readonly]').focus(function(){     this.blur(); }); 

Example here: http://jsfiddle.net/eAZa2/

Don't use the attribute "disabled" because the input would not be submitted when it is part of a form