Cross browser copy to clipboard like Bit.ly

|
Bit.ly, as well as other modern url shortening services, appears to have implemented a reliable copy to clipboard function. I have always wondered about this as there does not appear to be a Javascript API to do this despite my having read through the very comprehensive Javascript API availabe in the Javascript Bible.

The way the Bit.ly interface is implemented looks like this:


By clicking the Copy button the shortened url is placed into the clipboard and can be pasted anywhere. By inspecting the elements surrounding that area I find the follow code:


The screen shot preview may be hard to read but it turns out that the copy button is a Flash object. This makes sense as further research showed that using pure Javascript would need browser specific code for IE, FF, etc, furthermore it is not guaranteed not to break with browser updates. With Flash the only thing one needs to worry about is Flash updates.

The main bit of Flash code used is System.setClipboard(theTextVar); The text variable can be passed into the Flash object using the flashvars variable, then it is a simple case of calling the set clipboard function on a button click or on load.

A free implementation by Jeffothy is available here. Although his sample script is designed to be variable (letting users copy using JS) so it is not as concise as Bit.ly's, which only copy their shortended url.

0 comments:

Post a Comment