Constrain user selection to node without making it editable?

Question

I have the following page:

<div class="a">
  ...
</div>
<div class="b">
  ...
</div>

My users interact with this page by selecting various pieces of text within .a and .b. The browser's native selection behaviour almost works, but I need to prevent my users from making selections, which span the boundary between .a and .b.

Is there a way to constrain the user's selection to a <div>?

Unfortunately, this content is not user editable - which is unfortunate, because setting contenteditable="true" on each <div> achieves the constraint I'm looking for.

You can also use an Iframe, and style it to look unobtrusive. — Diodeus - James MacFarlane, Jul 15 '14 at 20:32
@Diodeus a disabled textarea is not selectable (at least in FF). iframe might limit what I can do with the javascript. — Dane O'Connor, Jul 15 '14 at 20:33
@Diodeus content isn't editable. Are you seeing something I'm not there? How do you deal with that in a textarea? — Dane O'Connor, Jul 15 '14 at 20:35
Perhaps this answer will help you. http://stackoverflow.com/a/2326028/592253 — Xotic750, Jul 15 '14 at 21:00
The `user-select` property has the `element` option. Unfortunately and somewhat paradoxically, this option is supported only in IE. Otherwise, you would have had a pure CSS solution. — DRD, Jul 15 '14 at 21:10

DRD · Accepted Answer · 2014-07-15T21:06:45.710

How about starting with this:

HTML:

<div class = "a">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id semper purus. Duis laoreet tellus in ante luctus semper. Praesent interdum urna quis luctus commodo.
</div>
<div class = "b">
    Curabitur vehicula eget leo a tristique. Donec eget aliquam erat. Mauris id porttitor lacus. 
</div>

CSS:

* {
    margin: 0;
    padding: 0;
}

body {
    padding: 10px;
}

.noSelection {
    -webkit-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

div + div {
    padding-top: 10px;
}

jQuery:

$(function() {
    $("div").hover(function() {
        $(this).siblings("div").toggleClass("noSelection");    
    });
});

Here's a fiddle: http://jsfiddle.net/J2fJz/.

Constrain user selection to node without making it editable?

1 Answers1