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

Answer 2

There is nothing wrong with doing this when you disable a form control.

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

or

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

However, that may not produce consistent behavior as it pertains to copying text (after selecting it).

An Imperfect JavaScript Way:

I have not used a select type event in a while, but I suggest toggling the ability to select the text. You might also play with the focus and blur events.

External CSS Style Sheet:

.preventSelection {user-select: none}  // IE 10+

W3Schools: user-select:

Quick and Dirty Event Handler:

function preventDisabledControlTextCopy(e)
{
    // blah, blah, blah

    if (e.target.disabled === true) {
        // Add "preventSelection" to e.target.className
        // Alternatively, change the focus to somewhere else!
    } else {
        // Remove "preventSelection" from e.target.className
    }
}

// Blah, blah, blah-blah blah

textBox.addEventListener("select", preventDisabledControlTextCopy, false);

It is never a waste of time to seek options. I skipped many details, but I made the important part explicit (as Stackoverflow is a tool people use to learn things). Implementation is up to you.

Final Thoughts:

The best answer might be to use CSS and JavaScript and toggle visibility: hidden (IE 4+) or display: none (IE 8+), depending on your scenario, DOM structure, and the complexity you are able to manage.

Dynamic forms are a great way to experience the interplay between HTML, CSS, and JavaScript.

Answer 3

I tried to use user-select in an input but it can't prevent selecting of text to it. Even wrap it to a div with a user-select: none style still not work. It's only work for (I think) non-focusable element like div, span, etc.

However, right now I think user-select: none is the only better option if you want to ensure that user won't copy the text from the page even in many different browsers (check user-select browsers compatibility). So I would suggest, create a component that something like this:

<input  *ngIf="!isDisabled" value="model" />
<div *ngIf="isDisabled" style="user-select: none">{{model}}</div>

Caveat: You have to styled the div to be more like a disabled input.