In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > selection and ranges > methods > collapse (selectionRange)

collapse method (selectionRange)

Browser support:

9

Moves the anchor and focus points of the current selectionRange object to the same, specified point.

Note: The selectionRange object and its collapse method are supported in Internet Explorer from version 9.

The selectionRange object represents the current selection.

When the anchor and focus points are at the same position, then no content is selected. Use the anchorNode, anchorOffset, focusNode and focusOffset properties to retrieve the boundary points and the isCollapsed property to detect whether a selectionRange object is collapsed.

In older Internet Explorer versions (and optionally in newer ones as well), use the createRange method on the selection object to get a TextRange object that represents the current selection and use the collapse method to collapse it. See the example below for details.

Syntax:

object.collapse (parentNode, offsetInsideParent);

You can find the related objects in the Supported by objects section below.

Parameters:

parentNode

Required. Refers to the deepest node in the DOM hierarchy that contains the new position. Sets the anchorNode and focusNode properties to the referred node.

offsetInsideParent

Required. Integer that specifies the new position relative to the parentNode element.

If the parentNode element can have child nodes, then the offsetInsideParent parameter specifies the position of a child node in the childNodes collection of the parentNode element, else it specifies a character position in the text content of the parentNode element.

This parameter sets the anchorOffset and focusOffset properties to the specified position.

Return value:

This method has no return value.

Example HTML code 1:

This example illustrates the use of the collapse method:

<head>
    <script type="text/javascript">
        function CaretToSelBegin () {
            if (window.getSelection) {  // all browsers, except IE before version 9
                var selection = window.getSelection ();
                selection.collapse (selection.anchorNode, selection.anchorOffset);
            }
            else {  // Internet Explorer before version 9
                var textRange = document.selection.createRange ();
                textRange.collapse (true);
                textRange.select ();
            }
        }
    </script>
</head>
<body>
    <div onmouseup="CaretToSelBegin ()" contenteditable="true" style="width:400px; background-color:#e0f0d0;">
        Select some text with your mouse within this field.
        When the left button is released the caret is placed 
        at the start point of the selection in Internet Explorer before version 9 and 
        at the point where the process of selecting was started in other browsers.
    </div>
</body>