Making things unselectable in IE

13,515

Solution 1

In IE, you need the unselectable attribute in HTML:

<div id="foo" unselectable="on">...</div>

... or set it via JavaScript:

document.getElementById("foo").setAttribute("unselectable", "on");

The thing to be aware of is that the unselectableness is not inherited by children of an unselectable element. This means you either have to put an attribute in the start tag of every element inside the <div> or use JavaScript to do this recursively for an element's descendants:

function makeUnselectable(node) {
    if (node.nodeType == 1) {
        node.setAttribute("unselectable", "on");
    }
    var child = node.firstChild;
    while (child) {
        makeUnselectable(child);
        child = child.nextSibling;
    }
}

makeUnselectable(document.getElementById("foo"));

Solution 2

You can use Javascript to make text unselectable in all browsers:

document.onselectstart=new Function('return false');
function noselect(e){return false;}
function click(){return true;}
document.onmousedown=noselect;
document.onclick=click;

Another way is described in this SO thread: Is there a way to make text unselectable on an HTML page?

The cheapest way probably is <body onselectstart="return false">

The best way though is possibly using the following CSS:

[unselectable=on] { -moz-user-select: none; -khtml-user-select: none; user-select: none; }

and add the IE unselectable property to the elements you want to make unselectable (unselectable="on" in HTML; element.setAttribute("unselectable","on") in javascript)

Check out this nice small article about unselectable text.

Solution 3

There is an unselectable="on" attribute.

http://msdn.microsoft.com/en-us/library/ms537840%28VS.85%29.aspx

Solution 4

This seems to work well in Chrome and IE11 so far, using JQuery...

function fMakeNodeUnselectable(node){      
    $(node).css({"cursor":"default","-moz-user-select":"-moz-none","-khtml-user-select":"none","-webkit-user-select":"none","-o-user-select":"none","user-select":"none"});
    $(node).attr("unselectable","on");
}

View more solutions

13,515

Author by

Tom Gullen

Me Web developer. Website http://www.scirra.com

Updated on June 20, 2022

Comments

Tom Gullen almost 2 years
Here is my chart I've been writing in JS:

http://jsfiddle.net/49FVb/

The css:
```
-moz-user-select:none;
-khtml-user-select: none;
```
Works fine for Chrome/FF, but in IE all the elements are still selectable which looks weird when dragging the bars around.

How can I make this unselectable in IE?