Prevent highlight outside wrapper

Asked Sep 18 '14 at 13:14

Active Sep 18 '14 at 13:16

Viewed 33 times

how do i prevent user try highlighting a text and prevent mouse goes outside the <div> wrapper?

<div id="wrapper">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. 
</div>

$(function(){
  $('#wrapper').on('mousedown', function(){
    // prevent mouse goes outside the wrapper box, all only highlight inside the wrapper
  });
});

edited Sep 18 '14 at 13:16

Huangism

16,278
7
48
74

asked Sep 18 '14 at 13:14

tonoslfx

3,422
15
65
107

Perhaps use CSS, set the whole page (`body`/`html`) to be unselectable, but for `#wrapper` allow it to be selected? Just a guess. http://stackoverflow.com/questions/826782/css-rule-to-disable-text-selection-highlighting JSFiddle example, not sure if it is what you want though: http://jsfiddle.net/j7x0jxha/ – Mardoxx Sep 18 '14 at 13:19
Hm I can't get it to work in IE, with `-ms-user-select: text` it allows selection of just the `#wrapper` but you can extend the selection outside of the element. – Mardoxx Sep 18 '14 at 13:29

Prevent highlight outside wrapper

0 Answers0