![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2015\/06\/overlaptext.gif\")
In this demo<\/a>, the overlap is a pseudo element filled with a a gradient and positioned on top. Thankfully, this is largely a fixable situation. That’s great, except IE 10 doesn’t support pointer-events. If you still wanted to rely on that, Modernizr v3<\/a> has a test for it, so you could only apply the overlay if you knew pointer-events worked.<\/p>\n 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<\/a>.<\/p>\n 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<\/a> is a fan. Aside from being presumptuous and over-eager, it can get in the way<\/a> of screenshotting.<\/p>\n Highlighter.js<\/a> is a library that makes this all-too-easy.<\/p>\n There is actually a CSS property specifically for controlling the selectability of text: Aside from a few browser quirks<\/a>, 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.<\/p>\n On mobile, text selection in generally done by a long tap which brings up some text selection choices. You can prevent<\/a> that “callout” (and thus prevent the selection of text), with:<\/p>\n You can force text to be unselectable with the CSS above, but some text isn’t selectable automatically:<\/p>\n 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.<\/p>\n 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<\/a>).<\/p>\n 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.<\/p>\n Form elements are often used for this. If you want to provide some text that is specifically<\/em> for copy-and-pasting, you typically put it in an Then it’s really easy to select that text programmatically:<\/p>\n You can’t really do that on a 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:<\/p>\n That bit with the I like this way<\/a> because it also doesn’t force all the text to be selected no matter what<\/em> (which people don’t like<\/a>), 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.<\/p>\n If you don’t provide click-to-select, that sometimes makes people unhappy<\/a> too, so it’s a balance. Hence why I like the focus-to-select, then let it be approach above.<\/p>\n There is a lot more to know about selecting text with JavaScript, including Range selection<\/a> and stuff, which is pretty complicated<\/a> and best saved for another article.<\/p>\n This ability just recently<\/a> surfaced in JavaScript. At the time of this writing, just Chrome and IE. It’s done through 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.<\/p>\n Matt Gaunt offers some example code<\/a>:<\/p>\n Email me at matt@example.co.uk<\/a><\/p>\npointer-events: none;<\/code> 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.<\/p>\nThe Post-Selection Popup<\/h3>\n
![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2015\/06\/popup-medium.png\")
<\/figure>\nCSS Control Over Selectability<\/h3>\n
user-select<\/code><\/a>.<\/p>\n.unselectable {\n -webkit-user-select: none; \/* Chrome all \/ Safari all *\/\n -moz-user-select: none; \/* Firefox all *\/\n -ms-user-select: none; \/* IE 10+ *\/\n user-select: none; \/* Likely future *\/ \n}<\/code><\/pre>\n-webkit-touch-callout: default \/* displays the callout *\/\n-webkit-touch-callout: none \/* disables the callout *\/<\/code><\/pre>\nOther visible text that doesn’t copy<\/h3>\n
\n
Accidentally Selecting Line Numbers<\/h3>\n
Selecting (All) Text with JavaScript<\/h3>\n
input<\/code> or textarea<\/code>.<\/p>\n<textarea id=\"ta\">a bunch of text<\/textarea><\/code><\/pre>\nvar ta = document.getElementById(\"ta\");\nta.focus();\nta.select();<\/code><\/pre>\n<\/code><\/p>\n<\/code><\/p>\n<\/code> 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.<\/p>\n$('#ta').on(\"focus\", function(e) {\n e.target.select();\n $(e.target).one('mouseup', function(e) {\n e.preventDefault();\n });\n});<\/code><\/pre>\nmouseup<\/code> allows the text to remain selected after the mouseup event. Normally the mouseup will deselect the text and activate the cursor.<\/p>\n![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2015\/06\/select-a-part.gif\")
Copying to the Clipboard Programmatically<\/h3>\n
document.execCommand('copy');<\/code><\/p>\n<\/code><\/pre>\n<\/code><\/pre>\n