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?

Not sure I understand, but maybe you can just focus the user's text $('someselector').focus(function(){$(this).val('');}); This will select user's text, thats what you meant? — Shaked KO, May 31 '11 at 15:51
@Shaked KO This question is about the selection on the page, like when you click and drag over some text. — Pointy, May 31 '11 at 15:52

Tim Down · Answer 1 · 2011-05-31T16:19:49.100

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();
    }
}

Stephane Gosselin · Accepted Answer · 2011-05-31T16:32:35.987

10

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();
}

edited May 31 '11 at 16:32

answered May 31 '11 at 15:51

Stephane Gosselin

9,030
5
42
65

1

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. – Tim Down May 31 '11 at 18:20
@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. – Stephane Gosselin Sep 21 '11 at 00:04
2

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. – Tim Down Sep 21 '11 at 08:32
@TimDown - Weird. I see my answer posted at 15:51, your posted at 16:10. (shrug). – Stephane Gosselin Jun 29 '13 at 01:31
1

This only clears the selection. Tim Down's answer also restores it. – Dan Dascalescu Jul 21 '15 at 06:41

score 1 · Answer 3 · answered Jun 14 '21 at 10:34

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);

Pointy · Answer 4 · 2011-05-31T16:22:36.913

0

In browsers that support the "selection" and "range" stuff, you'll want to create a range object and then set its start/end. The Mozilla documentation for the "range" object has a lot of information.

~~Chrome doesn't support this, at least not with that API, and I bet Safari doesn't either.~~

edit — thanks to @Tim Down for noting that WebKit (Chrome & Safari) do indeed support this, which means my jsfiddle had a typo or something!

edited May 31 '11 at 16:22

answered May 31 '11 at 16:04

Pointy

405,095
59
585
614

1

WebKit does have support for Range and Selection. – Tim Down May 31 '11 at 16:16
@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 May 31 '11 at 16:18
@Tim Down hmm well I must have just had a typo or something ... I'll edit the answer. Thanks!! – Pointy May 31 '11 at 16:21

JavaScript Set Window selection

4 Answers4

Linked