Copy & Paste & The Web

.unselectable {
  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
  user-select: none;          /* Likely future */       
}

-webkit-touch-callout: default   /* displays the callout */
-webkit-touch-callout: none      /* disables the callout */

<textarea id="ta">a bunch of text</textarea>

var ta = document.getElementById("ta");
ta.focus();
ta.select();

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:

$('#ta').on("focus", function(e) {
  e.target.select();
  $(e.target).one('mouseup', function(e) {
    e.preventDefault();
  });
});

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.

Matt Gaunt offers some example code:

Email me at [email protected]

Copy

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!!!

Don’t do that.

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.

I prefer the former.

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.

Title

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.

See the Pen Block titles kinda hard to copy by Chris Coyier (@chriscoyier) on CodePen.

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.

See the Pen flex ordering and selection by Chris Coyier (@chriscoyier) on CodePen.

Pasting into the Console

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.

Any more?

Have any pet peeves about copy and paste, or selection in general, on the web?