mozilla
Your Search Results

    Document.caretPositionFromPoint()

    This is an experimental technology
    Because this technology's specification has not stabilized, check the compatibility table for the proper prefixes to use in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the spec changes.

    This method is used to retrieve the caret position in a document based on two coordinates. A CaretPosition is returned, containing the found DOM node and the character offset in that node.

    Syntax

    var caretPosition = document.caretPositionFromPoint(float x, float y);
    

    Returns

    One of the following:

    • A CaretPosition.
    • Null, if x or y are negative, outside viewport, or there is no text entry node.

    Parameters

    x
    A horizontal position within the current viewport.
    y
    A vertical position within the current viewport.

    Example

    This example inserts line breaks wherever you click. The code for it is below the demo.  

    Demo

    HTML Content

    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
    sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
    sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

    JavaScript Content

    function insertBreakAtPoint(e) {
    
        var range;
        var textNode;
        var offset;
    
        if (document.caretPositionFromPoint) {
            range = document.caretPositionFromPoint(e.clientX, e.clientY);
            textNode = range.offsetNode;
            offset = range.offset;
            
        } else if (document.caretRangeFromPoint) {
            range = document.caretRangeFromPoint(e.clientX, e.clientY);
            textNode = range.startContainer;
            offset = range.startOffset;
        }
    
        // only split TEXT_NODEs
        if (textNode.nodeType == 3) {
            var replacement = textNode.splitText(offset);
            var br = document.createElement('br');
            textNode.parentNode.insertBefore(br, replacement);
        }
    }
    
    var paragraphs = document.getElementsByTagName("p");
    for (i=0 ; i < paragraphs.length; i++) {
        paragraphs[i].addEventListener("click", insertBreakAtPoint, false);
    }

    Specifications

    Specification Status Comment
    CSS Object Model (CSSOM) View Module
    The definition of 'caretPositionFromPoint' in that specification.
    Working Draft  

    Browser compatibility

    Feature Chrome Firefox Internet Explorer Opera Safari
    Basic support Not supported
    See below
    20.0 (20.0) Not supported Not supported Not supported
    See below.
    Feature Android Firefox Mobile IE Phone Opera Mobile Safari Mobile
    Basic support Not supported 20.0 (20.0)
     
    Not supported Not supported Not supported

    Gecko-specific notes

    WebKit-specific notes

    • WebKit (Safari 5, Chrome) implements document.caretRangeFromPoint(x,y) from an older W3C draft. Also, note that a Range is returned.

    Trident-specific notes

    • For MS Internet Explorer the proprietary method TextRange.moveToPoint(x,y) might be helpful.

    See also

    Document Tags and Contributors

    Contributors to this page: Sheppy, Nmaier, fscholz, Cobra, kscarfone, jpmedley, teoli
    Last updated by: jpmedley,
    Hide Sidebar