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.

Pretoria

You're trying to abuse a input control that is designed to have the features it needs to have (like focus caret, highlighting etc). Any sort of hack is not guaranteed to work in future versions of browsers. The cleanest way to do it would be to just use a label and a hidden field to submit the value. – Indictable

With that in mind, I think your experience of the caret showing when the field is readonly is not common. What OS/browser are you using? I have never seen a readonly field display a caret on any Mac or Windows browser; I admit I don't test non-Mac *nix browsers. – Interdenominational

@Interdenominational - Chrome does not show a caret, the rest do. – Carbonyl

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

Cargile

Then maybe disabled is what you are looking for. Just use it instead of readonly. – Cargile

@n3on: "disabled" actually prevents the field from posting. I had actually posted this comment on someone else's answer but the answer seems to be gone now. Still learning how to use SO, so not sure why. – Pretoria

yes right, sry I forgot that. Then the only way to do this behavior would be use a hidden input field for it and put the text in a simple html-tag (div, span, p, ...). You could do this directly in PHP when the page is generating or use JS to replace all the readonly textfields to hidden fields and insert the new html-tag. – Cargile

Note that disabled prevents submission of the field, whereas readonly does not. – Interdenominational

<input id="someID" onfocus="this.blur()" readonly="readonly" /> - actually the correct HTML is readonly="readonly" :) – Mauldon

@Mauldon - in (X)HTML, yes. However, in HTML, you do not have to specify values for 'boolean' attributes such as this one, so <input readonly> is actually fine and well formed. I prefer (X)HTML, though, of course. – Carbonyl

@n3on, @WeslyMurch - Beside causing submission exclusion, disabled also prevents mouse events from being fired on the input. It completely disables it. – Carbonyl

If you have an input that is dynamically readonly (e.g. depending on other parts of the DOM) you can blur on focus only if it is currently readonly by adding a check like onfocus="this.attributes.readonly && this.blur()" – Aiglet

Are there any solution for css? – Argal

@Argal there's no way in css to remove the focus from a field – Cargile

The onfocus="this.blur()" does not seem to work in IE11 – Toratorah

Answer 2

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

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

Thermogenesis

It also prevents onclick event from happening. – Sickle

It is work perfect for me in all the browser. Thanks for the answer – Pebrook

Best solution, no JS needed – Sherburne

Answer 3

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

caret-color: transparent;

you can test the result here

Ambassadoratlarge

This has no effect for IE which is explicitly asked for in the question... developer.mozilla.org/en-US/docs/Web/CSS/… – Litmus

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

Anyhow

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

Alitta

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.

Ramble

It would be better to set the tabindex to -1, so that it couldn't be focussed with keyboard shortcuts. – Mauldon

Answer 7

Easy!

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

Paddy

But with this, the value of that particular component wont get posted if used in form. – Neumark

Who uses native form submit in 2019? Use JS for it 😁 – Paddy