Making things unselectable in IE

J

4

9

Here is my chart I've been writing in JS:

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?

Jillane answered 15/12, 2010 at 9:59 Comment(1)

To get fiddle to work it needs to be set to Nowrap (body), and No Library (pure JS) – Jillane 15/12, 2010 at 10:8

P

15

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

Panthia answered 15/12, 2010 at 10:34 Comment(1)

Excellent stuff! And in jquery: $('#foo').attr("unselectable", "on"); – Sanies 21/5, 2013 at 13:22

N

5

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.

Narthex answered 15/12, 2010 at 10:18 Comment(1)

didn't try it in the newer versions of IE, but it is specified in MSDN, maybe the depreciated it. – Narthex 15/12, 2010 at 10:38

R

1

There is an unselectable="on" attribute.

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

Rozanne answered 15/12, 2010 at 10:17 Comment(0)

N

1

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

Neckwear answered 8/3, 2014 at 16:53 Comment(1)

The question was for IE. Your solution is Chrome? – Sunstroke 8/3, 2014 at 17:10

Recommended topics

Hot tags