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

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

collapseToEnd method (selectionRange)

Browser support:

9

Moves the start point of the current selectionRange object to its end point.

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

The selectionRange object represents the current selection.

If the direction of the selection is left-to-right, then the start point is the anchor point, else the focus point. When the anchor and focus points are at the same position, then no content is selected.

To move the end point to the start point, use the collapseToStart method.

Note: the collapseToEnd method has a bug in Opera, it works like the collapseToStart method.

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.

Syntax:

object.collapseToEnd ( );

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

Return value:

This method has no return value.

Example HTML code 1:

This example illustrates the use of the collapseToEnd method:

<head>
    <script type="text/javascript">
        function CaretToSelEnd () {
            if (window.getSelection) {  // all browsers, except IE before version 9
                var selection = window.getSelection ();
                selection.collapseToEnd ();
            }
            else {  // Internet Explorer before version 9
                var textRange = document.selection.createRange ();
                textRange.collapse (false);
                textRange.select ();
            }
        }
    </script>
</head>
<body>
    <div onmouseup="CaretToSelEnd ()" 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 end point of the selection.
    </div>
</body>