Implementing the Copy Feature for Yahoo! Mail Contact

The email contact bubble or "lozenge" as we call it, is a self contained entity in Yahoo! Mail compose page that can be copied, edited, deleted and even dragged around. It is one of the many useful design elements in the new Yahoo! Mail and a better, more intuitive way of representing the boring old email address. In this post, we will talk about a nifty trick that might be useful while working with web applications.

Most browsers do not allow the Javascript in the browser to assign text content into the operating system clip board. This leaves us with a unique problem of implementing the functionality of copying email address from a lozenge on to the clipboard. The usual shortcut to copy a string or any content is to use CTRL+c ( CTRL = control / command ) and CTRL+v to paste it back. All the key board interactions fire off events and the operating system manages the short cuts like CTRL+c and CTRL+v. The good thing about web applications running on the browser is that all of the keyboard and mouse events can be trapped by the web application before it bubbles up to the operating system level. This means that the web application is given first priority to handle the CTRL+c event. Using YUI event paradigm, any callback to an event is passed an event facade that gives all the details about the event.
Consider the code snippet below from the YUI 3 event example,

     var interceptLink = function(e) {
        Y.log("You clicked on the second YUI link.", "info", "example");
        alert("preventDefault stops default page navigation");
    /* subscribe our interceptLink function to the second anchor */
    Y.on("click", interceptLink, "#secondA");

Using YUI's e.preventDefault(); method, the web application now has the ability to decide whether it wants to allow the browser or the operating system to take its default action. Using e.stopPropagation(); or e.halt(); you can stop the event from bubbling up or halt it entirely.

Using the above notion, when you select a single or multiple lozenge and use the CTRL+C option to copy the contents, behind the scenes the Yahoo! Mail application creates a hidden text field with all the email contents copied into it. Before the event bubbles up to the operating system, the application marks all the contents of the text box as selected and assigns focus to the HTML text input element. Now when the event finally bubbles up to the operating system, it will notice that there was a CTRL+c that was triggered off and it has some selected text in focus that can be copied. The operating system goes through its default action and all the selected text is copied into the OS clip board. This trick allows the mail application to set up all the information that needs to be copied when it detects user intent to copy the lozenge and then allows the browser or OS to take its default action. The following diagram represents the series of events that happen in the Yahoo! Mail compose page when CTRL+c is used with the contact lozenge.

Steps involved in copy feature of Mail contactMail Contact sequence

The following is a sample code snippet of the of the "keydown" event handler code to set the hidden textNode with desired contents

    Y.on('keydown', function(event) {
      var specialKey = (Y.UA.os == "macintosh")?event.metaKey : event.ctrlKey,
      if (event.keyCode == 67 && specialKey)  {
         textNode ='#copyText);

         /* Copy the contents of the contact bubble / lozenge */
         textNode.set('value', 'Ankit Shah < >' );


This technique has been tested on Internet Explorer 7, 8 and 9, Firefox 4 and 5, all the latest versions of Chrome and on Safari 4.

Frontend Engineer Ankit Shah implemented this interesting solution to a unique problem. He and Howard Narvaez own the development of the Contacts Lozenge feature. They both work for the Mail Frontend team and are passionate in developing rich and intuitive functionality in the new Yahoo! mail.