6
<div class="container">
<div class="item1">text text text in div 1</div>
<div class="item2">text text text in div 2</div>
</div>

Is it possible (by any HTML node, CSS or JS) to prevent from selecting text in div.item2 if selection started from text in div.item1 and the other way around - starting from div.item2 and limit to it (prevent item1 form being selected)?

RobM
  • 432
  • 1
  • 4
  • 17
  • 2
    Possible duplicate of [Is there a way to make a DIV unselectable?](https://stackoverflow.com/questions/924916/is-there-a-way-to-make-a-div-unselectable) – easeccy Feb 21 '18 at 12:31
  • So, the only way is to add user-select: none to item2 if click event is triggered on item1 and vice versa? – RobM Feb 21 '18 at 12:34

4 Answers4

3

I came up with this, with a bit of jQuery code :

let $items = $(".item")

$items
 .mousedown( function() {
  $(this).siblings().css({ "user-select" : "none" , color : "lightgrey"}) 
 })
 .mouseup( function() {
  $items.css({ "user-select" : "auto" , color : "black"}) 
 })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
 <div class="item">text text text in div 1</div>
 <div class="item">text text text in div 2</div>
 <div class="item">text text text in div 3</div>
 <div class="item">text text text in div 4</div>
</div>
Jeremy Thille
  • 26,047
  • 12
  • 43
  • 63
  • there is a tiny issue :) if you start the selection outside from the bottom you can select all of them – Temani Afif Feb 21 '18 at 12:57
  • @JeremyThile and also doesn't work if structure is table IMAO – RobM Feb 21 '18 at 13:29
  • Of course it doesn't work if the structure is a table. You never talked about a table... but now you have a working example, you get the idea, you can adapt it to a table :) – Jeremy Thille Feb 21 '18 at 15:59
  • 1
    @Temani You're right, but OP's question is explicitely about starting within div1 or div2 and preventing the selection of others. – Jeremy Thille Feb 21 '18 at 16:00
1

The user-select: contain option does this. Unfortunately, it is only supported by ... IE???

https://developer.mozilla.org/en-US/docs/Web/CSS/user-select#browser_compatibility

HaveSpacesuit
  • 3,572
  • 6
  • 40
  • 59
  • Specifically the version that IE supports is actually called `user-select: element`. There's not much point in including it as a fallback though since there's not many IE / Old Edge users left – Yi Jiang May 11 '22 at 14:33
1

Here's how I solved the issue for my purposes...

I had several scrollable div's (with class txt), within which the user is allowed to select text — but only within one div at a time (and no other text on the page should be selectable). So, I used css:

*,.noSelect{ user-select:none; }
.txt{ user-select:text; }

...and then listen for the selectstart event, to grab the ID of the element where selection begins, and immediately disable selection in all the others:

document.addEventListener('selectstart',function(e){
  var selStartID=window.getSelection().anchorNode.parentNode.id;
  $('.txt').each(function(){
    if(this.id!=selStartID){$(this).addClass('noSelect');}
  });
});

...then, after you're finished doing whatever you're doing with the selection (copying/saving/etc), you can re-enable selection in all the other elements:

$('.noSelect').removeClass('noSelect');

Coming in CSS4? user-select: contain;

According to Mozilla, CSS UI 4 will simplify this with user-select: contain;... Currently only supported in IE [Words you don't often hear!]. There's a polyfill on github — though I haven't tried it.

(css-tricks.com has a different opinion about CSS4, and Wikipedia's got another story about it.)

ashleedawg
  • 20,365
  • 9
  • 72
  • 105
-2

Easiest way is using CSS: 

.item1 {
  user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
}
<div class="item1"> Unselectable text</div>
<div class="item2"> Selectable text</div>
Jeremy Thille
  • 26,047
  • 12
  • 43
  • 63
easeccy
  • 4,248
  • 1
  • 21
  • 37