Armen Armen - 1 month ago 23
CSS Question

In google chrome version 54 disabled fields are unselectable

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 ?

Answer

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