JavaScript Set Window selection

Question

In JavaScript, there is a method window.getSelection(), that lets me get the current selection that the user has made.

Is there a corresponding function, something like window.setSelection(), that will let me set, or clear, the current selection?

Solution 1

Maybe this will do it:

window.selection.clear();

Crossbrowser version:

if (window.getSelection) {
   if (window.getSelection().empty) {  // Chrome
     window.getSelection().empty();
   } else if (window.getSelection().removeAllRanges) {  // Firefox
     window.getSelection().removeAllRanges();
   }
} else if (document.selection) {  // IE?
  document.selection.empty();
}

Solution 2

Clearing the selection in all major browsers:

function clearSelection() {
    if (window.getSelection) {
        window.getSelection().removeAllRanges();
    } else if (document.selection) {
        document.selection.empty();
    }
}

Selecting content requires use of DOM Range and Selection objects in most browsers and TextRange objects in IE < 9. Here's a simple cross-browser example that selects the contents of a particular element:

function selectElement(element) {
    if (window.getSelection) {
        var sel = window.getSelection();
        sel.removeAllRanges();
        var range = document.createRange();
        range.selectNodeContents(element);
        sel.addRange(range);
    } else if (document.selection) {
        var textRange = document.body.createTextRange();
        textRange.moveToElementText(element);
        textRange.select();
    }
}

Solution 3

NOTE: This is an experimental technology Check the Browser compatibility table carefully before using this in production.

Clear Selection:

// get a Selection object representing the range of text selected by the user or the current position of the caret.
var selection = window.getSelection();
selection.removeAllRanges();

Set Selection By Node:

var selection = window.getSelection();
var range = document.createRange();
    
range.selectNode(nodeToSelect);

selection.addRange(range);

Set Selection By Indexes:

var selection = window.getSelection();
var range = document.createRange();
    
range.setStart(nodeToSelect, this.startIndex);
range.setEnd(nodeToSelect, this.endIndex);
    
selection.addRange(range);

Get Current Selection

var range = window.getSelection().getRangeAt(0);

Comments

[Tim Down]

WebKit does have support for Range and Selection.

[Pointy]

@Tim Down - really? When I tried it in Chrome I got an error from document.createRange() (to the effect that there was no such function). I'll try again.

[Pointy]

@Tim Down hmm well I must have just had a typo or something ... I'll edit the answer. Thanks!!

[Tim Down]

Chrome supports removeAllRanges(), so you don't need the extra branch. Downvote removed, although window.selection.clear(); is still useless (and will throw an error) and the rest is essentially a copy of part of my answer.

[stefgosselin]

@Tim, fair enough .. except for the part about the copying of your answer. It appears by looking at the time the answers were posted that your answer is the one that is a copy of what I posted. The 'copy' generally comes after the original.

[Tim Down]

I suggest you check the times again. Regardless, I'm not bothered so long as the accepted answer is correct, and all correct answers to this question are going to look essentially the same.

[stefgosselin]

@TimDown - Weird. I see my answer posted at 15:51, your posted at 16:10. (shrug).

[Dan Dascalescu]

This only clears the selection. Tim Down's answer also restores it.