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

You can set the style attribute of your tag or you can add a css class to your tag by setting the class attribute's value. Your problem can be solved by setting the cursor. You can read more here. Also, if you have some rules which set the cursor of this tag you can add !important to your css rule. You can read more about !important here.

Answer 2

It can be done using html and javascript

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

or globally using 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 css:

input {pointer-events:none;}

Reference: https://developer.mozilla.org/pt-BR/docs/Web/CSS/pointer-events

Answer 5

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

Answer 6

If you change the readonly attribute to disabled, you won't be able to click into the input box and thus won't have a cursor.

Depending on the browser, you may not be able to select the text either though.

I've provided examples of the various input states here: http://jsfiddle.net/hqBsW/1/

Another alternative is you could force a text selection when the user focuses on a given input element. This change in control behavior would more easily clue the user into the fact that input is restricted, and allows them to copy very easily if that is the end use case.

Using jQuery you would write the selection code like this:

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

I've updated the example to show this behavior in action: http://jsfiddle.net/hqBsW/2/