clipBoard simulation

by dixalex

HTML

<p>Email me at <a class="js-emaillink" href="mailto:[email protected]">[email protected]</a></p>

<p>
    <button class="js-emailcopybtn">Text</button>
</p>

<p>
    <input class="js-cuttextarea" type='text' value="Hello I'm some text">
</p>

<p>
    <button class="js-textareacutbtn">Cut Textarea</button>
</p>

JavaScript

//Cut and Copy Commands - https://developers.google.com/web/updates/2015/04/cut-and-copy-commands?hl=en

//$('*').attr('contenteditable', 'true');

var copyEmailBtn = document.querySelector('.js-emailcopybtn');
copyEmailBtn.addEventListener('click', function(event) {
    event.preventDefault();
    // Select the email link anchor text  
    var emailLink = document.querySelector('.js-emaillink');
    $('a').focus();
    var range = document.createRange();
    range.selectNode(emailLink);
    window.getSelection().addRange(range);
    try {
        // Now that we've selected the anchor text, execute the copy command  
        var successful = document.execCommand('copy');
        var msg = successful ? 'successful' : 'unsuccessful';
        console.log('Copy email command was ' + msg);
    } catch (err) {
        console.log('Oops, unable to copy');
    }

    // Remove the selections - NOTE: Should use
    // removeRange(range) when it is supported  
    window.getSelection().removeAllRanges();
});

var cutTextareaBtn = document.querySelector('.js-textareacutbtn');

cutTextareaBtn.addEventListener('click', function(event) {
    var cutTextarea = document.querySelector('.js-cuttextarea');
    cutTextarea.select();

    try {
        var successful = document.execCommand('cut');
        var msg = successful ? 'successful' : 'unsuccessful';
        console.log('Cutting text command was ' + msg);
    } catch (err) {
        console.log('Oops, unable to cut');
    }
});

$('.js-textareacutbtn').click();
//$('button.js-textareacutbtn').focus();