Remove text caret/pointer from focused readonly input

Question

I am using an , styled as normal text to remove the appearance of an interactive field, but still display the value.

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

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 3

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 4

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

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

Answer 5

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 6

Easy!

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