2

Seems after last google chrome (version 54) update i'm not able to select via mouse text from disabled fields in my website.

// Text inside this input not selectable by mouse but before it was ...
<input type="text" value="text to copy via mouse" name="name" disabled>

There is no strict response from google support about this issue if it bug or feature: https://productforums.google.com/forum/#!topic/chrome/YzPWsT_QnDU

douse anyone know if it new feature or bug ? and if there is some way to overwrite this feature by css or html attribute ?

Armen
  • 4,064
  • 2
  • 23
  • 40
  • `disabled` and `readonly` are distinct - I think you're actually looking for the latter. – Lucero Nov 01 '16 at 07:24
  • @Lucero my input note have `readonly` attribute it has only `disabled` and now its content unselectable ... before it was for sure ! – Armen Nov 01 '16 at 07:37

3 Answers3

2

Some browsers have been behaving like this for a long time (if not forever).

This behavior seems to be in line with the HTML spec:

  • Disabled controls do not receive focus.
  • Disabled controls are skipped in tabbing navigation.
  • Disabled controls cannot be successful.

A successful control is "valid" for submission. Every successful control has its control name paired with its current value as part of the submitted form data set.

...

The difference between disabled and readonly is that read-only controls are still focusable, so the user can still select the text and interact with it, whereas disabled controls are entirely non-interactive.

(Emphasis mine)

Use readonly (and some CSS rule to gray it out if you want a different appearance) instead if you want the input to remain "accessible".

Firefox has been behaving that way for a long time (see issues 195361 and 253870) for instance. They are aware of the behavior change in Chrome (see comment 37).

WHATWG is also discussing the issue (in general): https://github.com/whatwg/html/issues/1852

And for the record, the Chromium bug related to this change is this one: https://bugs.chromium.org/p/chromium/issues/detail?id=626581

Community
  • 1
  • 1
Lucero
  • 59,176
  • 9
  • 122
  • 152
  • But `readonly` inputs are being submited during form submition and i need to not submit the data. Disabled filed behaver is ok in my case only the new issuse which appearse after update is that im not able to select text inside disabled input **via mouse** copy it – Armen Nov 01 '16 at 07:56
  • I have updated my example in question to be more clear. i need to be able copy via mouse text `text to copy via mouse` from disabled input – Armen Nov 01 '16 at 07:57
  • 1
    @Armen, any chance you could render `readonly` inputs and disable them on form submission? – Frédéric Hamidi Nov 01 '16 at 08:46
  • @FrédéricHamidi that's an option for workaround (i have also other ideas how to workaround it) but i would like to at least understand if it is **bug** or new **feature** – Armen Nov 01 '16 at 08:49
  • I have Chrome's version, 53.0.2785.113 m, and it allows disabled textboxes to be copied. However in my colleague's version 54 doesn't allow it, so the issues is only after chrome's 54 update. Readonly might not always be right solution. – Rahul R. Nov 04 '16 at 10:19
  • I know that I had this problem in the past myself, but indeed it may have been with another browser (Firefox maybe). I then switched to `readonly` and CSS styling and all was good (and because the forms are not submitted but handled by JS code in my app, the difference in posting behavior did not affect me). – Lucero Nov 04 '16 at 10:35
2

I've encountered the same issue following the Chrome update and solved it by changing "disabled" to "readonly". I haven't found any mentions of a change in this particular Chrome update that would change this behaviour, but there is a lot of activity on the web these past few days regarding exactly this situation. (disabled input not allowing manual selection)

As Lucero pointed out, this behaviour is in line with the HTML specs, so this change is most likely a bugfix and we should have not used disabled fields for this purpose before (at least now that there is a readonly attribute designed exactly for this).

<input type="text" readonly />
Gabriel Criteo
  • 21
  • 1
  • Ok thanks for info. I also came to opinion that is is some old bug fix – Armen Nov 02 '16 at 14:25
  • Be careful while using readonly, http://stackoverflow.com/questions/8876928/allow-copy-paste-in-a-disabled-input-text-box-in-firefox-browsers – Rahul R. Nov 04 '16 at 10:23
0

If someone need a solution for exactly disabled button case i found only way to do it with js copy button implementation through jquery

$( document ).ready(function() {

        $( "input[type='text']:disabled" ).each(function( index, value ) {

            var $element = $(value);
            var width = $element.outerWidth();
            var height = $element.outerHeight();
            var $appendToElement;

            // Wrapper element by relative positioned div
            $element.wrap("<div>")
            $appendToElement = $element.parent();
            $appendToElement.css({"position":"relative"});

            $("<div>")
                .css({
                   'position': 'absolute',
                   'top': 0,
                   'margin-top': $element.css('border-top-width'),
                   'margin-left': $element.css('border-left-width'),
                   'width': width,
                   'height': height,
                   'z-index': 10,
                   'cursor': 'pointer',
            })
            .hover(
                function() {
                    $(this).html("Click to copy");
                },
                function() {
                    $(this).html("");
                }
            )
            .click(function() {
                copyToClipboard( $(this).parent().find('input').val() );
                $(this).html("Copied");
            })
           .appendTo( $appendToElement );

        });

});


function copyToClipboard(text) 
{
   if (window.clipboardData && window.clipboardData.setData) {

       // IE specific code path to prevent textarea being shown while dialog is visible.
       return clipboardData.setData("Text", text);

   } else if (document.queryCommandSupported && document.queryCommandSupported("copy")) {

       var textarea = document.createElement("textarea");

       textarea.textContent = text;
       textarea.style.position = "fixed";  // Prevent scrolling to bottom of page in MS Edge.
       document.body.appendChild(textarea);
       textarea.select();

       try {
           return document.execCommand("copy");  // Security exception may be thrown by some browsers.
       } catch (ex) {
           return false;
       } finally {
           document.body.removeChild(textarea);
       }
    }
}
Armen
  • 4,064
  • 2
  • 23
  • 40