HTML: cursor showing in readonly input text?

问题:

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?

回答1:

Sounds like a bug!

There is a similar bug (396542) open with Mozilla, saying that the cursor should blink in readonly inputs — but that behavior feels wrong, a blinking cursor is supposed to mean, “you can type here.”

You should comment on that bug and/or file new ones (with Mozilla here and with Microsoft here)!

In the meantime, using disabled or changing the behavior with JavaScript, as @nikmd23 suggested, seems like the best workaround.

回答2:

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

回答3:

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/

回答4:

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

回答5:

For a CSS only fix, use :

input[readonly] {
  pointer-events: none;
}

回答6:

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');

回答7:

You can use css:

input {pointer-events:none;}

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

回答8:

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.