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.

回答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" >

回答2:

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

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

回答3:

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

caret-color: transparent;

you can test the result here

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

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

回答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.

回答7:

Easy!

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

来源：https://stackoverflow.com/questions/5443952/remove-text-caret-pointer-from-focused-readonly-input

标签

html

css

forms

caret