JSFiddle - React, Tailwind, and code Playground

by Lakshman M

HTML

<p>
  <input class="js-copytextinput" value="http://www.stackoverflow.com"></input>
  <button class="js-textinputcopybtn">Copy Text Input</button>
</p>

<p>
    <textarea class="js-copytextarea">http://www.stackexchange.com</textarea>
  <button class="js-textareacopybtn">Copy Textarea</button>
</p>

JavaScript

$(document).ready(function() {
    //textinput copy
    var copyTextinputBtn = document.querySelector('.js-textinputcopybtn');

    copyTextinputBtn.addEventListener('click', function(event) {
        var copyTextinput = document.querySelector('.js-copytextinput');
        copyTextinput.select();
        
        try {
            var successful = document.execCommand('copy');
            var msg = successful ? 'successful' : 'unsuccessful';
            console.log('Copying text input command was ' + msg);
        } catch (err) {
            console.log('Oops, unable to copy');
        }
    });
    
    //textarea copy
    var copyTextareaBtn = document.querySelector('.js-textareacopybtn');

    copyTextareaBtn.addEventListener('click', function(event) {
        var copyTextarea = document.querySelector('.js-copytextarea');
        copyTextarea.select();
        
        try {
            var successful = document.execCommand('copy');
            var msg = successful ? 'successful' : 'unsuccessful';
            console.log('Copying text area command was ' + msg);
        } catch (err) {
            console.log('Oops, unable to copy');
        }
    });
    
});