Prevent text selection from exiting a div

Question

I have a div that displays some text that the user might want to highlight to copy and paste or the like. While kicking the tires of that design, I noticed it was easy to end up selecting content beyond that div simply by dragging the mouse too far. I'd like to avoid this issue by preventing the selection from leaving the relevant div, but I haven't been able to find any way to do it.

One possible solution might be applying user-select:none (as described here) everywhere but that particular div, but that won't work in this case because there are other divs which need to have selectable text.

Conceivably jQuery could be used to change div styles so that user-select:none would apply to everything but the div you're selecting text in, but I feel like there has to be a simpler way to go about it, possibly even with just CSS.

Anyone know how to do this?

Edit: Josh C's answer below does the trick. Here's a JS fiddle fork of his solution, with the most important change in the fork being the addition of the disabled="disabled" attribute to the textarea. When selecting text within the textarea while using that attribute, no caret will appear in the text and the outline will not glow when focus is on the textarea. The only other thing to note is that you'll have to control textarea browser defaults if you want to obscure the fact that the text is in a textarea.

if you share the sample mark... possibly using http://jsfiddle.net/ we could have a better look — Arun P Johny, Aug 23 '13 at 04:08

Josh Crozier · Accepted Answer · 2013-11-06T05:14:59.547

You could achieve this with jQuery, however, the easiest and most lightweight option I know of would just be to do what companies like Google have always done:

Place the text that is going to be highlighted inside an input or textarea box.

Demo here

<textarea>Text that will be highlighted here..</textarea>

If you want it to be somewhat hidden, set border:none;

textarea {
    border:none;
    width:400px
    resize:none;
}

If you want to embed maps from Google, Youtube videos, or a facebook feed, all these companies use this approach. I'm pretty sure this is your best option.

If you want the text to be auto selected on click, use some JS like:

function SelectAll(id) {
  document.getElementById(id).focus();
  document.getElementById(id).select();
}

Thanks, Josh. This does the trick. As noted in my edit to the question above, the only thing I'd add is that including `disabled="disabled"` in the `textarea` hides some of the other indications that you're in a `textarea`. — Vincent, Aug 23 '13 at 17:21

score 1 · Answer 2 · edited May 23 '17 at 10:32

1

Seems like you might want to be able to click on this div and copy it's text contents to your clipboard.

Here is a stackOverflow about copying to clipboard.

The best explanation was here.

edited May 23 '17 at 10:32

Community

1
1

answered Aug 23 '13 at 04:21

mpiccolo

662
5
14

Not quite what I'm looking for... the user might want to copy only part of the text, or the user might just want to highlight a part of the text to point it out to another person looking at the same screen. – Vincent Aug 23 '13 at 17:35

score 0 · Answer 3 · answered Sep 04 '17 at 17:21

I just wanted to include my snippet here. My focus was on making sure that I could display header and paragraph text without the text area styles bleeding through. I also prefer to use attribute selectors for this sort of css tom-foolery.

[selectable-text]{
    padding: 0;
    width:100%;
    border: none;
    resize:none;
    background:none;
    font-size:inherit;
    font-family:inherit;
    font-weight:inherit;
    color: inherit;
}

<h1>
  <textarea  selectable-text disabled="disabled" rows=1 >Soldering Iron 110v</textarea>
  </h1>
<p>
<textarea  selectable-text disabled="disabled" rows=1 >This is a fine soldering iron.</textarea>
</p>
<h1>Soldering Iron 110v</h1>
<p>This is a fine soldering iron.</p>

Prevent text selection from exiting a div

3 Answers3