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;
}

Answer 3

You can remove the blinking caret by specify the css attribute into transparent

caret-color: transparent;

you can test the result here

Answer 4

It can be done using html and javascript

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

or jQuery

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

Answer 5

the only way i found for this was

//FIREFOX
$('INPUT_SELECTOR').focus(function () {
                $(this).blur();
            });
//INTERNET EXPLORER
$('INPUT_SELECTOR').attr('unselectable', 'on');
KENDO
$('.k-ff .k-combobox>span>.k-input').focus(function () {
                $(this).blur();
            });
$('.k-ie .k-combobox>span>.k-input').attr('unselectable', 'on');

Answer 6

The onfocus/blur method works ok to remove the cursor from a readonly field, but the browser does not automatically refocus on the next field, and you may lose focus altogether, which is not what the user usually expects. So, if this is required, you can use plain javascript to focus on the next field you want, but you have to specify the next field:

<input type="text" name="readonly-field" value="read-only" 
readonly onfocus="this.form.NextField.focus()">

Where 'NextField' is the name of the field to goto. (Alternatively, you could provide some other means to locate the next field). Obviously, this is more involved if you want to navigate to some non-visible UI element, like a tab-panel, as you will need to arrange this as well.

Answer 7

Easy!

Just add disabled to input and it will not be clickable (focused)