2

We are building a web app that allows elements to be expanded/collapsed.

One of the clickable items is shown below:

Notice the text selection when clicking on the element is annoying. What is the recommended approach for handling this?

Community
  • 1
  • 1
Burt
  • 7,680
  • 18
  • 71
  • 127
  • 3
    That should only happen on a double-click, not a single click. – BoltClock Sep 28 '12 at 13:57
  • Thanks for the reply BoltClock. It does on double clicking but because the items can expand and collapse, the chances of a double click is pretty high (in my opinion) – Burt Sep 28 '12 at 13:58
  • 1
    If the user thinks that selecting text is annoying then the user shouldn't select text. I don't see why this would be the application's concern. You could try some JavaScript which moves focus around for various click events, but I imagine that would be a _lot_ more annoying (both for the users and the developers). – David Sep 28 '12 at 13:59
  • 1
    check this link http://stackoverflow.com/q/826782/1577396. Is this what you want? – Mr_Green Sep 28 '12 at 13:59
  • I think the consensus is this is a bad idea, I thought it was – Burt Sep 28 '12 at 14:03
  • Do you want to disable text selection? – Artem Oliynyk Sep 28 '12 at 14:07
  • @ntvf I am not sure, the visual effect looks crap but the alternative of switching of text selection is worse – Burt Sep 28 '12 at 15:31

2 Answers2

1

For Firefox and Chrome/Safari you can use the user select property. It is still experimental I think so you should use vendor prefixes like this: #element-id{-moz-user-select: none; -webkit-user-select: none;}


As for Opera and IE I have no idea (maybe for Opera using -o-user-select will work, but I am not sure)

EDIT: I looked around a bit, because I was also interested in this question and apparently, for Opera and IE there is an unselectable property. More details about it

Richard Otvos
  • 196
  • 1
  • 12
1

To disable selection in a CSS way:

user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;

or you may use element attribute unselectable

<div unselectable="on">...</div>
Artem Oliynyk
  • 3,517
  • 1
  • 14
  • 11