4

I require one HTML element (Label) on my page to be unselectable for IE ... currently I have tried

  1. Unselectable=on
  2. onselectreturn=false;

none of which is helping me out.

For Firefox and Chrome i have set the following CSS property which are working absolutely fine ... but the problem as always with the IE.

CSS properties you have set:

-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
user-select: none;

is there any alternative or IE-hack?

An answer on Stack Overflow has helped me out but not for IE.

Community
  • 1
  • 1
abhijit
  • 1,958
  • 3
  • 28
  • 39
  • 1
    Don’t do this. Making elements unselectable is generally really bad for usability. – Konrad Rudolph Jun 02 '11 at 11:51
  • @konrad---i know that but i want that functionality @razlebe--IE 8 – abhijit Jun 02 '11 at 11:53
  • You can achieve this with JScript - or does it need to be CSS/HTML only? – My Head Hurts Jun 02 '11 at 12:37
  • @KonradRudolph Actually, having selectable text in the wrong place, like with self-made buttons or other dynamically functional elements, can decrease user-ability, depending on what it is. – VoidKing May 07 '13 at 13:51
  • @VoidKing Never seen an example of this. I agree that having selectable texts on a button doesn’t necessarily *increase* usability – but *decrease* it? I don’t think so. And in particular in mobile applications it’s become fashionable to make almost nothing selectable, which is usability hell. – Konrad Rudolph May 08 '13 at 04:23
  • @KonradRudolph Yeah, I mispoke. It doesn't decrease userability, it just looks tacky as hell. – VoidKing May 08 '13 at 20:32

3 Answers3

7

<label unselectable="on"> should work for IE in the HTML. If applying it from javascript you MUST use setAttribute: labelEl.setAttribute("unselectable","on"). labelEl.unselectable = "on" does not work (tested in IE9).

Note that the "unselectable" attribute only affects text directly inside the element, not within its children - you need to set unselectable on them also, if that's the effect you want.

Doin
  • 7,545
  • 4
  • 35
  • 37
6

In IE8 there are two ways to make an element unselectable:

1.) myElement.unselectable = "on"; // Does not work on body elements

2.) myElement.onselectstart = function (){ return false; }

Once an element is unselectable, users cannot select from within that element. However, they are still able to select either the text or the box of the element by dragging into it from within another element which is not unselectable.

I have tried to work around this by cancelling various events on myElement (ondragenter, oncontrolselect, onmouseenter, onselectionchange...), it didn't work.

All this applies only to IE8

Luc125
  • 5,752
  • 34
  • 35
0

Set unselectable to off and it should work.

<label unselectable="off">Something</label>

http://jsfiddle.net/sWguE/1/

This also works for me

<label onselect="return false">Something</label>

http://jsfiddle.net/sWguE/3/

Jason Gennaro
  • 34,535
  • 8
  • 65
  • 86
  • it works, but I suspect that "off" is not the official value to set it to, because it doesn't make sense. `unselectable='off'` would imply the opposite of what's actually happening. – Spudley Jun 02 '11 at 12:32
  • 1
    Are you sure that works? I can still select in IE7, IE8 and IE9 – My Head Hurts Jun 02 '11 at 12:36
  • I just edited the answer to provide another possible solution. I am using IE8. – Jason Gennaro Jun 02 '11 at 12:42
  • i just got the answer read this article....http://msdn.microsoft.com/en-us/library/ms534706%28v=vs.85%29.aspx..i had span across my label so it didnt clicked...now setting unselectable="on" is fine – abhijit Jun 02 '11 at 12:49
  • I don't know how either of these is working for you because it certainly doesn't work for me. (In IE8. Chrome and FF work as you expect.) – anothershrubery Jun 02 '11 at 12:51
  • yes it wont work..only unselectable="on" works with an exception if you drag start from a dom which is selectable towards the dom which has its attribute set to unselectable="on" also becomes selectable then.... – abhijit Jun 02 '11 at 12:58
  • 1
    There's a good chance that you are selecting another object first (like the body), then dragging the selection into the area occupied by the span. "An element with the UNSELECTABLE attribute set to on can be included in a selection that starts somewhere outside the element." The unselectable attribute prevents the onselectstart event if you click on the element directly, but not if the selection begins elsewhere. For this reason, applying the attribute to a single span is much less effective than applying it to the entire document body. – abhijit Jun 02 '11 at 12:59
  • It is the current attribute see http://msdn.microsoft.com/en-us/library/ie/hh801966%28v=vs.85%29.aspx – dude Dec 11 '14 at 16:53