CODEWITHSUNDEEP
javascriptcssinternet-explorer
verkholantsev
verkholantsev

Reputation: 105

Disable/enable text selection in IE

We've got a project, were we disabling text selection to all body content. So the solution for this is CSS styles for normal browsers (like user-select: none) and workaround for IE (like document.body.onselectstart = function () { return false; }).

So the problem is: how to enable text selection in some div-elements in IE? And how to do it simple and quickly?

Upvotes: 0

Views: 4237

Answers (4)

TildalWave
TildalWave

Reputation: 1667

Well, the easiest way would be to reverse your logic and only apply this rule to elements that aren't supposed to be able to have their text selected. Problem with applying this rule to the whole body is that any child elements then already receive this overridden event from their parent (body) element, and the way to re-initialize onselectstart event isn't as easy as some seem to have assumed with their answers here. In your case, I would remove this rule for the whole body and then only apply it to the individual elements that don't have any children where the overriding rule must not apply.

Example:

<body>
  this is some text that is selectable
  <div style='-o-user-select: none;
              -webkit-user-select: none;
              -moz-user-select: -moz-none;
              -khtml-user-select: none;
              -ms-user-select: none;
              user-select: none;' 
       onselectstart='return false;'
       unselectable='on'>
    this is some text that's not selectable
  </div>  
</body>

> see working demo on JSFiddle

Note that some individual properties listed aren't supported yet and I've added them anyway for future-proofing purposes. The rule-set is compiled in a way to support as many different browsers as possible. Some will obey CSS styling, some need a JavaScript hack (IE < 10) and Opera browsers obey to a special element property (see below).

EDIT: Added support for Opera browsers (unselectable='on')

Upvotes: 3

Bilal Fazlani
Bilal Fazlani

Reputation: 6967

use jQuery

$("body").disableSelection();

Upvotes: 0

Mehavel
Mehavel

Reputation: 595

    document.body.onselectstart = function (event) {
    if(event.srcElement.parentNode.id == 'mydiv')//you may need to loop if the parentNode is 
    {                                            //not a div element
        return true;
    }
    else{
        return false;
    }
 }

note: disabling javascript will enable the user to select text

I have updated the fiddle link

Upvotes: 2

Anooj P
Anooj P

Reputation: 346

<div onselectstart='return true;'>blablabla</div>

Upvotes: 2

Related Questions