htmlcssformscaret

Remove text caret/pointer from focused readonly input


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.


Solution

  • 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" >