title: Constrain user selection to node without making it editable?
body: <p>I have the following page:</p>
  
  <pre><code>&lt;div class="a"&gt;
    ...
  &lt;/div&gt;
  &lt;div class="b"&gt;
    ...
  &lt;/div&gt;
  </code></pre>
  
  <p>My users interact with this page by selecting various pieces of text within <code>.a</code> and <code>.b</code>. The browser's native selection behaviour almost works, but I need to prevent my users from making selections, which span the boundary between <code>.a</code> and <code>.b</code>.</p>
  
  <p>Is there a way to constrain the user's selection to a <code>&lt;div&gt;</code>?</p>
  
  <p>Unfortunately, this content is <em>not</em> user editable - which is unfortunate, because setting <code>contenteditable="true"</code> on each <code>&lt;div&gt;</code> achieves the constraint I'm looking for.</p>