Copy to Clipboard!

Copy to Clipboard!

Today, I will share some ideas about making 'Copy to Clipboard!' button using JavaScript. This is very common feature that many site already has for good user experience.

There are libraries that can be used for it like ZeroClipboard through which we can accomplish this and do much more things. For simple 'Copy to Clipboard' button, we can also use the following code. It is simple & easy. It adds a temporary input box into page for selection, copies the required text and then selects it for clipboard. At the end we delete this temporary input box.

$('.clipboard').click(function(){
        var $temp = $("<textarea>");
        $("body").append($temp);
        $temp.val($(this).parent().parent().text()).select();
        document.execCommand("copy");
        $temp.remove();
        $(this).parent().find('.copied').show(1).css('display','inline-block').fadeOut(3000);
    });

Click icon on code block to see it in action.

Happy Coding!

Lakshay Katney Avatar

Lakshay Katney

Saleforce developer by profession but I like to work with various technologies.I blog about Force.com, Hybrid Apps, PhoneGap, AngularJS, BackboneJS, JavaScript in general. I am Angular & NodeJS fan.

Read More
Share this page
Latest 15 Posts

100%