4
<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
  • 412
  • 4
  • 16
  • 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

3 Answers3

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
  • 25,196
  • 9
  • 41
  • 59
  • 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,109
  • 5
  • 39
  • 52
  • 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
-3

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
  • 25,196
  • 9
  • 41
  • 59
easeccy
  • 3,182
  • 16
  • 31
  • 3
    Already posted then removed. How do you start from div2 and prevent div1 selection? – Jeremy Thille Feb 21 '18 at 12:40
  • Just copy this code to an empty `.html` and run it! – easeccy Feb 21 '18 at 12:42
  • 2
    I did better. I made a runnable snippet with your code so you can see it doesn't work :) – Jeremy Thille Feb 21 '18 at 12:43
  • 1
    @Nobody The clue of this question is that should be done dynamically. Your answers is useless if you start from item2 – RobM Feb 21 '18 at 13:03
  • You can change CSS properties dynamically. Also if you start from item2 (bottom to up) item1 is still unselectable. What is wrong with this code then? – easeccy Feb 21 '18 at 13:10
  • If you dont have the experience to judge my answer, and it seems that way, then your behaviour is unexpectable, rude. – easeccy Feb 22 '18 at 10:33