Cross-Browser: Different behaviors for disabled input fields (the text can/can't be copied)

Question

I have a input html field that is disabled. In some browsers (Chrome, Edge, Internet Explorer and Opera) is possible to select and copy the text but, at least, in Firefox it is not possible.

You can test it by executing the following code in different browsers:

<input type="text" disabled value="is disable">
<input type="text" readonly value="is readonly">

I read in here that disabled fields can be focus, here that A disabled input element is unusable and un-clickable and in here that A read-only input field cannot be modified (however, a user can tab to it, highlight it, and copy the text from it).

I didn't find anything saying that the text from disabled inputs can't be copied.

There is standard behavior and some browsers are not respecting it or can the browsers choose if the text from a disabled input can or can't be copied?

And there is a solution for allowing, in all browsers, the text from a disabled input field to be copied?

Note: My application is implemented using Angular/TypeScript languages.

---

It seams that the only browser that has a distinct behavior is firefox. I opened an issue in here trying to understand if is a design option or if is a bug. I'm waiting now for an answer.

Answer 1

Change your field from disabled to readonly. That is the correct attribute for the behaviour you want.

Don't waste time hacking a javascript solution together as it will be even more flaky than the minor differences in browser behaviour.

If the issue is that you want your readonly fields to look like disabled fields, it's fairly easy to style an input with a readonly attribute set. You don't need to change behaviour to change appearance.

input[readonly] {
  background: #EEE;
  color: #666;
  border: solid 1px #CCC;
}

<input readonly value="I am readonly">