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

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

isPointInRange method (Range)

Browser support:

Returns whether a point is inside the current Range object or not.

The comparePoint method is similar to the isPointInRange method, it returns 0 if a point is inside and -1 (before) or 1 (after) if a point is outside the current Range object. Amother similar method is the compareBoundaryPoints method, it compares the boundary points of two Range objects.
Since the compareBoundaryPoints method is supported in Internet Explorer from version 9, use that instead of the isPointInRange method. See the examples below for details.

Syntax:

object.isPointInRange (nodeToCheck, offsetInsideNode);

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

Parameters:

nodeToCheck

Required. Refers to the deepest node in the DOM hierarchy that contains the point to check.

offsetInsideNode

Required. Integer that specifies the position of the point relative to the nodeToCheck element.

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

Return value:

Boolean. One of the following values:

false	The specified point is in the current Range.
true	The specified point is not in the current Range.

Example HTML code 1:

This example illustrates the use of the isPointInRange method:

<head>
    <script type="text/javascript">
        function TestCaret () {
            var secondSen = document.getElementById ("secondSen");

            if (window.getSelection) {  // all browsers, except IE before version 9
                var selection = window.getSelection ();
                
                var secondSenRange = document.createRange ();
                    // select the contents of the text node inside the bold tag
                    // it is the smallest range that contains the entire text 
                secondSenRange.selectNodeContents (secondSen.firstChild);
                
                if (secondSenRange.isPointInRange) {
                    if (secondSenRange.isPointInRange (selection.focusNode, selection.focusOffset)) {
                        alert ("The caret is inside the second sentence.");
                    }
                    else {
                        alert ("The caret is outside the second sentence.");
                    }
                }
                else {      // Internet Explorer from version 9
                    alert ("Your browser does not support this example!");
                }
            }
            else {      // Internet Explorer before version 9
                alert ("Your browser does not support this example!");
            }
        }
    </script>
</head>
<body>
    Click inside the following field:<br />
    <div contenteditable="true" onmouseup="TestCaret ()" style="background-color:#d0e0c0">
        First sentence.<br />
        <span id="secondSen">Second sentence.</span><br />
        Third sentence.
    </div>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example is the same as the previous one, but it also works in Internet Explorer from version 9:

<head>
    <script type="text/javascript">
        function TestCaret () {
            var secondSen = document.getElementById ("secondSen");

            if (window.getSelection) {  // all browsers, except IE before version 9
                var selection = window.getSelection ();
                var selRange = selection.getRangeAt (0);

                    // returns whether the direction of the selection is left-to-right
                var selLtR = (selRange.endContainer == selection.focusNode && selRange.endOffset == selection.focusOffset);
                
                var secondSenRange = document.createRange ();
                    // select the contents of the text node inside the bold tag
                    // it is the smallest range that contains the entire text 
                secondSenRange.selectNodeContents (secondSen.firstChild);
                
                    // compares the caret position to the start position of the second sentence
                var relStart = selRange.compareBoundaryPoints (selLtR ? Range.START_TO_END : Range.START_TO_START, secondSenRange);
                    // compares the caret position to the end position of the second sentence
                var relEnd = selRange.compareBoundaryPoints (selLtR ? Range.END_TO_END : Range.END_TO_START, secondSenRange);

                if (relStart < 0) {
                    alert ("The caret is before the second sentence.");
                }
                else {
                    if (relEnd > 0) {
                        alert ("The caret is after the second sentence.");
                    }
                    else {
                        alert ("The caret is inside the second sentence.");
                    }
                }
            }
            else {      // Internet Explorer before version 9
                alert ("Your browser does not support this example!");
            }
        }
    </script>
</head>
<body>
    Click inside the following field:<br />
    <div contenteditable="true" onmouseup="TestCaret ()" style="background-color:#d0e0c0">
        First sentence.<br />
        <span id="secondSen">Second sentence.</span><br />
        Third sentence.
    </div>
</body>