How to Create Copy to Clipboard or How to Create Clipboard in Lightning Component

Hello friends today post,, How to Create Copy Clipboard in Lightning Component
so let us start......

Step=>1.

       goto developer Console......
                                    File=>New=>Lightning Component
                             
                                          copyToClipboard.cmp

 <aura:component implements="flexipage:availableForAllPageTypes" access="global" >
    <div>
        <p aura:id="pId">quick brown fox jumps over the lazy dog</p>
        <lightning:button iconName="utility:copy_to_clipboard"
                          onclick="{!c.copyHardcoreText}"
                          label="Copy Text to clipboard"
                          aura:id="btn1"/>
    </div>
 
    <div>
        <lightning:textarea value="hello i am textarea value" aura:id="inputF"/>
        <lightning:button iconName="utility:copy_to_clipboard"
                          onclick="{!c.copyInputFieldValue}"
                          label="Copy Text to clipboard"
                          aura:id="btn2"/>
    </div>
 
    <div>
        <lightning:textarea value="" label="Paste Here (for testing)"/>
    </div>
</aura:component>

Step=>2.
     
             copyToClipboardController.js

({
    copyHardcoreText : function(component, event, helper) {
        // get HTML hardcore value using aura:id
        var textForCopy = component.find('pId').getElement().innerHTML;
        // calling common helper class to copy selected text value
        helper.copyTextHelper(component,event,textForCopy);
    },
 
    copyInputFieldValue : function(component, event, helper) {
        // get lightning:textarea field value using aura:id
        var textForCopy = component.find('inputF').get("v.value");
        // calling common helper class to copy selected text value
        helper.copyTextHelper(component,event,textForCopy);
    },
 
})


Step=>3.

             copyToClipboardHelper.js

({
    copyTextHelper : function(component,event,text) {
        // Create an hidden input
        var hiddenInput = document.createElement("input");
        // passed text into the input
        hiddenInput.setAttribute("value", text);
        // Append the hiddenInput input to the body
        document.body.appendChild(hiddenInput);
        // select the content
        hiddenInput.select();
        // Execute the copy command
        document.execCommand("copy");
        // Remove the input from the body after copy text
        document.body.removeChild(hiddenInput);
        // store target button label value
        var orignalLabel = event.getSource().get("v.label");
        // change button icon after copy text
        event.getSource().set("v.iconName" , 'utility:check');
        // change button label with 'copied' after copy text
        event.getSource().set("v.label" , 'copied');
     
        // set timeout to reset icon and label value after 700 milliseconds
        setTimeout(function(){
            event.getSource().set("v.iconName" , 'utility:copy_to_clipboard');
            event.getSource().set("v.label" , orignalLabel);
        }, 700);
     
    }
})



                                                       Output:

Thanks.!

Buy me a coffee