Offscreen Text for Copy & Paste

By  on  

The relationship between HTML and CSS is special: mixing content via HTML with presentation from CSS to make an awesome presentation. Sometimes, however, you need to employ CSS tricks solely to enhance functionality. This could be one of those cases.

When browsing through the Firefox DevTools console code, I noticed a really clever technique for hiding text on screen but making sure it's present during a copy + paste. Here's the technique:

<p>Jenny don't change your number <span class="copy-only">8675309</span></p>
.copy-only {
  display: block;
  position: absolute;
  left: -9999999px;
  top: -9999999px;
}

With the CSS above, the screen displays "Jenny don't change your number" while copying that line would result in "Jenny don't change your number 8675309".

When you plant the text offscreen via CSS, it's still copied to the clipboard when the user does a copy operation. You're essentially picking and choosing what gets copied, which can be very valuable if you expect users to copy your content.

Recent Features

  • By
    fetch API

    One of the worst kept secrets about AJAX on the web is that the underlying API for it, XMLHttpRequest, wasn't really made for what we've been using it for.  We've done well to create elegant APIs around XHR but we know we can do better.  Our effort to...

  • By
    Conquering Impostor Syndrome

    Two years ago I documented my struggles with Imposter Syndrome and the response was immense.  I received messages of support and commiseration from new web developers, veteran engineers, and even persons of all experience levels in other professions.  I've even caught myself reading the post...

Incredible Demos

  • By
    MooTools Equal Heights Plugin:  Equalizer

    Keeping equal heights between elements within the same container can be hugely important for the sake of a pretty page. Unfortunately sometimes keeping columns the same height can't be done with CSS -- you need a little help from your JavaScript friends. Well...now you're...

  • By
    MooTools: Set Style Per Media

    I'd bet one of the most used MooTools methods is the setStyle() method, which allows you to set CSS style declarations for an element. One of the limitations of MooTools' setStyle() method is that it sets the specific style for all medias.

Discussion

  1. Charlie

    Very nice, gotta love those little CSS tweaks.
    Small caveat, only works if the user double-clicks on line to select, won’t if it’s a “click-hold on first letter and drag cursor” kind of copy

  2. Does it work in all browsers? It’s very easy to use and simple, but I’m concerned that it could be too simple to work in every browser.

  3. These simple and small tweaks help a long way in designing. Thanks a lot for sharing :)

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!