Copy & Paste & The Web
Have you ever tried to copy and paste some text only to find it frustrating, awkward, or even impossible? I bet you have. It’s not random. On the web, you have a decent amount of control over it. Let’s just lay a bunch of stuff out there as food for thought.
Perhaps this is the most obvious problem, so let’s not dwell on it. If text can be “real text” on the web, please do that. Compared to an image of text, real text is more accessible, more indexable, and more useful. You can select it to copy and paste!
Have you ever seen that effect where text fades out at the bottom? It’s often done by laying a gradient image over top of that text. You can see through part of it, but that element is still sitting on top of the text, meaning mouse interaction happens on the overlap, not the text. In this demo, the overlap is a pseudo element filled with a a gradient and positioned on top. Thankfully, this is largely a fixable situation. pointer-events: none; on the overlap will go a long way in helping. With that set, pointer interactions will totally ignore the element. Clicks will go right through as if it wasn’t even there. That’s great, except IE 10 doesn’t support pointer-events. If you still wanted to rely on that, Modernizr v3 has a test for it, so you could only apply the overlay if you knew pointer-events worked. Or, instead of an overlay at all, you could color individual lines to make it look like a fadeout as we covered in this article.
Some sites make some pretty big assumptions after you’ve selected some text. A common one is: OH GOOD YES HELLO HI I SEE YOU OBVIOUSLY MUST WANT TO SHARE THIS BIT OF TEXT ON SOCIAL MEDIA LET ME HELP. Not everyone is a fan. Aside from being presumptuous and over-eager, it can get in the way of screenshotting. Highlighter.js is a library that makes this all-too-easy.
CSS Control Over Selectability
There is actually a CSS property specifically for controlling the selectability of text: user-select .
Aside from a few browser quirks, text with that set is unselectable. That can be pretty useful when trying to design better UX around the selectability of text on your site. On mobile, text selection in generally done by a long tap which brings up some text selection choices. You can prevent that “callout” (and thus prevent the selection of text), with:
-webkit-touch-callout: default /* displays the callout */ -webkit-touch-callout: none /* disables the callout */
Other visible text that doesn’t copy
- Default counters, like the bullets from unordered lists or the numbers from ordered lists
- Custom CSS counters
- Pseudo element text
Accidentally Selecting Line Numbers
Once in a while you’ll run across a chunk of code on a website you want to copy and paste. After you paste it, you find the line numbers came along with it.
It’s kind of surprising actually, since it seems like you’d have to go out of you way to make that happen. Knowing what we know now, those line numbers could have used CSS to prevent them from being copied. Or the code could have been marked up as a list to show the numbers that won’t copy. Or it could have used custom counters which wouldn’t copy. Or pseudo elements before the lines that wouldn’t copy (relevant article).
So the only way this can happen is if they just plopped some text right in the element at the start of the line and did nothing to prevent it from being copied. Likely a pretty easy fix we could encourage any offender to do.
Selecting (All) Text with JavaScript
Form elements are often used for this. If you want to provide some text that is specifically for copy-and-pasting, you typically put it in an input or textarea .
Then it’s really easy to select that text programmatically:
var ta = document.getElementById("ta"); ta.focus(); ta.select();
You can’t really do that on a
or whatever. Also, if a user is inside a form element, the typical “Select All” command will only select the text within the bounds of that element, which is nice, expected behavior.
If you want the behavior where the text gets selected as you click into it, here’s a pretty succinct jQuery way to do it:
That bit with the mouseup allows the text to remain selected after the mouseup event. Normally the mouseup will deselect the text and activate the cursor.
I like this way because it also doesn’t force all the text to be selected no matter what (which people don’t like), just on the inital focus. So after the focus, if you want to change the selection yourself and only copy a part of the text, you can do that.
If you don’t provide click-to-select, that sometimes makes people unhappy too, so it’s a balance. Hence why I like the focus-to-select, then let it be approach above.
There is a lot more to know about selecting text with JavaScript, including Range selection and stuff, which is pretty complicated and best saved for another article.
Copying to the Clipboard Programmatically
This ability just recently surfaced in JavaScript. At the time of this writing, just Chrome and IE. It’s done through document.execCommand(‘copy’);
There is a whole history here that I’m not quite up-to-snuff with. I think it was largely a security concern that was why it was impossible in JavaScript. Not to mention a tastefulness concern (who wants to visit a site only to find their clipboard messed with?). For whatever reason, it’s available again.
var copyEmailBtn = document.querySelector('.js-emailcopybtn'); copyEmailBtn.addEventListener('click', function(event) < // Select the email link anchor text var emailLink = document.querySelector('.js-emaillink'); var range = document.createRange(); range.selectNode(emailLink); window.getSelection().addRange(range); try < // Now that we've selected the anchor text, execute the copy command var successful = document.execCommand('copy'); var msg = successful ? 'successful' : 'unsuccessful'; console.log('Copy email command was ' + msg); >catch(err) < console.log('Oops, unable to copy'); >// Remove the selections - NOTE: Should use // removeRange(range) when it is supported window.getSelection().removeAllRanges(); >);
Copying text to the clipboard programmatically has always been a desire though. We used to have to use flash, typically a library called ZeroClipboard. Here’s a David Walsh tutorial on that.
How To Paste With/Without Style/Formatting
When you copy text, it generally comes along with formatting.
On Macs, there is a Paste and Match Style command though, which can be very useful to get rid of that formatting when you don’t want it. Like when pasting into an email. Command-Shift-V is the usual shortcut for that.
I generally prefer this behavior, so I did the thing where I mapped it to Command-V (overriding normal paste).
You can still paste which formatting through the menus if you need to.
Extra Crap on the Clipboard
Have you ever selected some text from a site, only to find when you paste it that it has happened some extra crap to the end of your selection? READ MORE AT FART-KNUCKLE.BUSINESS.
Awkward Retained Capitalization
You can capitalize text in CSS with text-transform: uppercase; . It causes a rather large (annoying) functionality difference in copy-pasting though across browsers.
From what I tested quickly:
- Firefox and IE respect the original text (what is in the DOM).
- Chrome, Safari, Opera, and iOS respect the CSS capitalization.
Block Links Can Make It Harder To Copy
In HTML5, we learned we can now wrap anchor tags around whatever we want. Even though they are inline elements, we can wrap them around blocks without worry of being invalid. It doesn’t come without repercussion though.
This makes the entire block title a link without any CSS assistance, but it does make the title a bit harder to copy. Wrapping that markup around and doing h3 > a < display: block; >makes it a little easier, assuming there is a bit of padding on the h3, because then you can start the selection in the padding and move.
So on one hand there is a larger click area, and on another it’s slightly harder to copy (if you’re a normal right-to-left copier). Your call.
Sometimes block structure itself can cause annoying situations. Like here, you’re trying to select a movie title, but a pixel too far and you get a bunch of weird text in totally unrelated positions:
It’s not that huge of an issue here as I think people are a bit used to this and know how to back off and get what they need. But it’s worth considering. Even things like flexbox ordering can totally change how text selection behaves even when visually things look identical.
Classic rube mistake: Copying the “$ ” at the beginning of console commands in blog posts about how to do terminal things. HANDS UP people. Just me? Dammit. Anyway. There is a pretty funny dotfile thing to warn you when you do it.
Have any pet peeves about copy and paste, or selection in general, on the web?
How to Copy Code From a Website
Daniel Nations has been a tech journalist since 1994. His work has appeared in Computer Currents, The Examiner, The Spruce, and other publications.
What to Know
- Chrome: Right-click a blank space on the page and choose View Page Source. Highlight the code, then copy and paste to a text file.
- Firefox: From the menu bar, choose Tools >Web Developer >Page Source. Highlight the code, then copy and paste to a text file.
- Safari: Select Show Develop in Advanced Settings. Choose Develop >Show Page Source. Copy and paste the code into a text file.
If you’re a web user, designer, or developer who often comes across great looking websites with features you’d like to emulate, you can view or save the website code for your reference. In this guide, we show you how to copy website code using Chrome, Firefox, and Safari.
How to Copy Code in Google Chrome