How can I deselect text using Javascript or jQuery?

Question

I have a draggable (jQuery UI) element with "canceled" text on it. Here's what I mean:

$('#main').draggable({
        cancel: '#main>* *',
        start: function(){
          // deselect text
        }
});

When I drag the element, I often select the text by accident. I want to deselect the text when the element is dragged.

Answer 1

To deselect everything you can use:

document.getSelection().removeAllRanges();

Answer 2

jQuery UI now includes .disableSelection(), which you can use to prevent the text inside your elements from being selected. The API documentation on it isn't hugely useful, but: http://api.jqueryui.com/disableSelection/

As an aside, Eric G's answer proved supremely helpful for me when creating my own "text highlighting" tool - as Lawrence remarked, it won't throw out an error if no text has been selected.

Answer 3

Clear document selection document.selection.empty();

Something like:

 $('#main').draggable({
     cancel: '#main>* *',
     start: function(){
      // deselect text
      document.selection.empty();
     }
 });