Offscreen Text for Copy & Paste
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.
![39 Shirts – Leaving Mozilla]()
In 2001 I had just graduated from a small town high school and headed off to a small town college. I found myself in the quaint computer lab where the substandard computers featured two browsers: Internet Explorer and Mozilla. It was this lab where I fell...
![Introducing MooTools Templated]()
One major problem with creating UI components with the MooTools JavaScript framework is that there isn't a great way of allowing customization of template and ease of node creation. As of today, there are two ways of creating:
new Element Madness
The first way to create UI-driven...
![Using jQuery and MooTools Together]()
There's yet another reason to master more than one JavaScript library: you can use some of them together! Since MooTools is prototype-based and jQuery is not, jQuery and MooTools may be used together on the same page.
The XHTML and JavaScript
jQuery is namespaced so the...
![Web Audio API]()
The Web Audio API allows developers to load and decode audio on demand using JavaScript. The more I evaluate awesome games for Firefox OS TVs, the more I get to learn about these APIs that I normally wouldn't touch. The following is a very basic introduction to the WebAudio API...
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
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.
These simple and small tweaks help a long way in designing. Thanks a lot for sharing :)