Getting “copy friendly” with jQuery

When I’m not busy writing backends for large service provisioning platforms, I get to spend some time in the user-facing interfaces of these platforms. We’ve prided ourselves so far on maintaining cross browser compatibility (excluding IE6), and to a certain extend mobile phone accessiblity as well. All the dynamics of the interface is done with jQuery, and it is done unobtrusively as well. We frequently test the site with Javascript disabled, to make sure that everything works as expected, and it mostly does. Webrat is a great help here as well, since it navigates the site without Javascript…

But enough blabbering, the ISP in a Box platform is huge, and interacts with various other service providers through a myriad of API’s, some of them as reliable as convicted mobster. Our support teams are constantly double checking the interactions between the autonomous participants and our service providers, and this means a lot of copying and pasting, from our interfaces to theirs.

They simply “double click” to select text in our interface, causing the browser to copy additional whitespace with the selected text. When pasting into a search box they need to prune the additional whitespace off manually, making the process even slower and more tedious than it needs to be. I can’t replicate this with Firefox on Ubuntu, but it happens to the Windows guys…

In the previous version of the system I solved the issue quickly and bluntly by simply placing all the information in text fields that were styled to be transparent. In this day and age of unobtrusiveness I thought it more appropriate to generate the text fields on the fly, since they’re a convenience and have no effect on the functionality of the system.

It took me 5 minutes to get this done in jQuery, and another 10 to figure out how to wrap it all up as a jQuery plugin. I love jQuery…

Ladies and gentleman, I present you with the jQuery copyfriendly plugin.

Usage

$(document).ready(function(){
  $('.copyme').copyfriendly();
});

And then mark your “copy friendly” HTML elements like this:

<table>
  <tr>
    <td class="copyme">Hello</td>
  </tr>
</table>

Or inline like this:

<span class="copyme">Heya</span>

copyfriendly() takes on parameter currently, which is optional:

copyfriendly({
  klass: "borderless"
});

The ‘klass’ option tells copyfriendly which CSS class to apply to the inputs generated.

Sample CSS

You can make the inputs generated by copyfriendly invisible using this sample CSS:

input.borderless {
  border: none;
}

Do be warned that it might take a little more to align the appearance of the remaining text with the surrounding text in the document.

How it works

Actually quite simple. All it does is extract the text from the element and then replaces that text with an input tag of type “text”, and the value is the original text extract from the matching element. The size of the element is dynamically calculated from the string length, so there might be room for improvement here.

Welcome to the Open Sourcery Archives. These are my older blog posts, from days gone by. I'm keeping them up as part of the historical record. That, and I'm strangely sentimental about them. Please keep in mind that things most certainly have changed since these articles were written, links to external sites might be broken, and general thinking might have changed.

Regardless of all this, I hope you enjoy your stay!

comments powered by Disqus