Making things unselectable in IE

StackOverflow https://stackoverflow.com/questions/4448671

Question

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?

Was it helpful?

Solution

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"));

OTHER TIPS

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.

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");
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top