Remove text caret/pointer from focused readonly input

Question

I am using an <input readonly="readonly">, styled as normal text to remove the appearance of an interactive field, but still display the value.

This is very useful to prevent a user from editing a field, while still being able to post the value. I realize this is a convenience method and that there are several workarounds, but I want to use this method.

Problem: The blinking caret still appears when the field is clicked/focused. (At least in FF and IE8 on Win7)

Ideally, I would like it to behave as it normally does, focusable, but without the blinking caret.

Javascript solutions welcome.

Answer 1

On mine there is no caret or so:

<input type="text" value="test" readonly="readonly" > 

Take a look at this: http://www.cs.tut.fi/~jkorpela/forms/readonly.html

Sorry, now I understand your problem.

Try this:

<input type="text" value="test" onfocus="this.blur()" readonly="readonly" > 

Answer 2

You can use this in your css, but it will not focus:

[readonly='readonly'] {    pointer-events: none; }