Clipboard.js: Text not copied to clipboard in disabled textarea

[johnymontana]

I am using clipboard.js to copy text from a disabled textarea (the text is programmatically generated and I don't want the user to edit it before copying):

<button class="copyBtn" data-clipboard-target="#myTextArea">Copy</button>
<textarea id="myTextArea" rows="10" disabled>My text here</textarea>

With the disabled property the text is not copied to the clipboard, despite the clipboard success event indicating that it is:

var clipboard = new Clipboard('.copyBtn');

        clipboard.on('success', function(e) {
            console.info('Action:', e.action);
            console.info('Text:', e.text);
            console.info('Trigger:', e.trigger);

            e.clearSelection();
        });

        clipboard.on('error', function(e) {
            console.error('Action:', e.action);
            console.error('Trigger:', e.trigger);
        });

Action: copy 
Text: My text here
Trigger: <button data-clipboard-target="#myTextArea" class="copyBtn">​

Removing the disabled property on the textarea, clipboard functions as expected and text is copied.

[zenorocha]

Have you tried readonly instead of disabled?

[johnymontana]

Works fine with readonly, which makes more sense for my use-case. Thanks.

[zenorocha]

;D

[ngocdaothanh]

I encountered this problem too.
Clipboard.js works with disabled on Chrome, but not on Firefox.
readonly is OK on both.

I think you should update the readme and the web site to mention about readonly, as I think many people may encounter this problem too, and they may give up this wonderful Clipboard.js because they think it's broken.

[LulzAugusto]

@ngocdaothanh is correct, disableddoesn't works on Firefox and yet it emits the success event.

[Damini25]

solution-
onCopy() {
const copyText = (document.getElementById('1'));
copyText.disabled = false;
copyText.select();
document.execCommand('Copy');
copyText.disabled = true;
}

[huy9x30]

@Damini25 your solution worked for me. Thanks a lot!