Copy data to clipboard using javascript

Having been a programmer for more than 8 years now, I feel I still cannot grasp the functionalities that would make the end-users happy. These might be a mere few lines of code from a technical perspective, but these might very well make the end-users very happy.

I came across one of such incident recently. One of the user of my application was an elderly person who had to type in so many numbers from one system to a third-party system (among many tasks). So, we added a “Copy” icon for her to copy those numbers on a button and simply paste them in the other system. I was really amazed by her gratification. And it made me realize no matter who complex algorithm or architecture we design for our customers, it won’t matter until it helps them in one way or the another.

Okay. Enough of the background. Let’s get to the technical nitty-gritty now. I was surprised how hard it was to find a suitable method to copy “stuffs” to the clipboard. Of course, I came across several javascript libraries such as clipboard.js¬†and zeroclipboard which claims to do the job in few simple steps. But I didn’t want to use any extra javascript libraries. After devouring stackoverflow for a significant amount of time, I came across a solution that just use pure javascript.

The following javascript function ‘copyData()’ uses ‘document.execCommand(‘copy’)‘ to copy the currently ‘highlighted’ data to the clipboard. ‘execCommand()‘ is an Internet Explorer-based statement that allows the browser to execute a command specified as its argument. As you can see below, we have a hidden textarea , which will hold the text to be copied passed as argument to the function ‘copyData()’. The ‘data’ will be placed in the hidden textarea and is highlighted and then will be copied to the clipboard.

Continue reading