CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Vincent
Vincent

Reputation: 2787

Prevent text selection from exiting a div

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.

Upvotes: 4

Views: 2028

Answers (3)

Josiah
Josiah

Reputation: 504

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>

Upvotes: 0

Josh Crozier
Josh Crozier

Reputation: 241138

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();
}

Upvotes: 4

mpiccolo
mpiccolo

Reputation: 672

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.

Upvotes: 1

Related Questions