Last month I wrote about a nifty trick we implemented in Yahoo! Mail to copy an email address using the keyboard shortcut CTRL+C (CMD+C on OSX ) on a selected contact bubble or "Lozenge. The keyboard shortcut, while useful, was not something that was immediately obvious to users. For the functionality to be widely applicable, its important to support familiar UI paradigms that are mouse friendly too. The problem however is that most browsers do not natively support writing to Operating System Clipboard. This means that we had to figure out a way to trigger the copy to clipboard on mouse clicks on UI elements and UI paradigms like custom context menus ( hitting enter on a menu item etc.) I wrote a YUI 3 Node Plugin called gallery-clipboard that is available on YUI 3 Gallery to support this requirement.
The problem is not new and a while back, a very cool project called Zeroclipboard tackled this problem in a unique way by utilizing the ability of the Flash run-time to write to the operating system clipboard. With the recent Flash run-time security updates, they introduced a number of user-initiated action (UIA) requirements so that their run-time is in sync with the emerging web security model as implemented by other web clients.
What this means is that we will be able to write to the operating system clipboard only when the user initiated event (keyboard or mouse) is trapped by the flash movie and the clipboard is set inside the event callback.
Zeroclipboard worked around this problem by using an invisible (zero) Adobe Flash movie that was made to float below the user's mouse cursor when ever the copy had to be done, so that a user initiated event would actually be trapped by the Flash movie instead of the HTML DOM. The following diagram represents the various states for setting up the clipboard copy.
Zeroclipboard assumed that the user initiated action are always going to be mouse events. In Yahoo! mail, this was not sufficient because we have to care about keyboard accessibility as well. To work around this I wrote the clipboard-plugin for Yahoo! mail and this project has been open sourced on YUI gallery. The clipboard-plugin is designed to be a YUI 3 Node plugin which makes it really easy to set up. Any YUI 3 Node can be augmented with clipboard functionality. Instead of pre-creating event callbacks to user initiated events in the flash movie, the approach taken here is that the developer can decide what events the flash movie has to subscribe to and on what events should the clipboard write take place. This keeps things simple and also gives maximum flexibility to the developer to setup a clipboard copy even on keyboard events. To check out the code and the examples, please look for clipboard-plugin on the YUI gallery and you can fork the code from GitHub
This feature is used in the Lozenge context menu feature in the new Yahoo! Mail.
It currently supports all browsers that support Flash 10. On IE 7 and IE 8, we fall back to the native clipboard support. I also reached out to the developers of ZeroClipboard and they have shared some of their valuable feedback, some of which have already been incorporated.