Why is .disableSelection() deprecated?

Jason Kleban picture Jason Kleban · Dec 19, 2012 · Viewed 16.1k times · Source

.disableSelection in JQueryUI 1.9 is deprecated. The only explanation I can find is, literally, "Disabling text selection is bad. Don't use this." and "We shouldn't allow developers to mess with text selection. This was originally for the interaction plugins, but they're all handling text selection properly on their own at this point."

Since there is no alternative suggested, I assume they mean that it is always bad but I cannot fathom their reasons. A double/triple-click or otherwise meaningless selection of an elaborate-UI application improperly applies the text-highlight effect and (to me) instantly removes the illusion of a robust user experience.

Desktop applications don't suffer from this! Buttons and other controls in a Desktop environment are regions of pixels that look solid and act intuitively no matter what you do to them (or else they're broken). The fact that web applications are composed of complex html boxes, backgrounds, borders, and images (the web-analog of pixels) is no reason to betray the illusion that the screen elements we interact with isn't an atomic, physical object.

In the image below, arguably some of the text should be selectable, such as the paragraphs of text within panels which could be application data. But for some applications it would be a reasonable design choice that other parts, such as the text in buttons, tabs, accordion headers, and text behind modal dialogs would not be selectable. This especially applies to draggable/sortable kinds of behaviors.

jQuery UI Themeroller, with a region selected

1) Am I misinterpreting their decision? Is the recommendation more specific to JQuery than I realize?

2) If it is meant as a general statement that text should always be selectable like this, please provide a fuller explanation of why.

3) If I were going to do it anyway, what is the most performant, complete, respectful, cross-browser, and universally accessible to go about it now that disableSelection is deprecated?

Answer

Shmiddty picture Shmiddty · Dec 19, 2012

You can use CSS to accomplish this in most browsers: http://jsfiddle.net/fQthQ/

* {
   -ms-user-select: none; /* IE 10+ */
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   user-select: none;
}

.selectable {
   -ms-user-select: auto;
   -moz-user-select: auto;
   -khtml-user-select: auto;
   -webkit-user-select: auto;
   user-select: auto;
}

Opera does not currently support this feature.

See the MDN page for more info: https://developer.mozilla.org/en-US/docs/CSS/user-select