Have ideas to improve npm?Join in the discussion! »

    caret-pos
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.0 • Public • Published

    Build Status

    Caret Pos

    Get the position/offset of the caret/cursor from a textarea, contentedtiable, or an iframe body.

    The reason for the iframe is that WYSIWYG editors are often inside of one.

    This can also set the position in an editable field.

    Caret.js

    This is a port of ichord's Caret.js. The motivation for porting this was to drop the jQuery dependency and drop support for older browsers. This library won't work with any browser that doesn't have support for the Selection API. Check caniuse.com for browser support.

    Thanks to ichord for all his hard work.

    Usage

    Simply import position and/or offset from cart-pos.

    import { position, offset } from 'caret-pos';

    Get

    Use one of the functions to get the value.

    const input = document.querySelector('.foo');
    const pos = position(input); // { left: 15, top: 30, height: 20, pos: 15 }
    const off = offset(input); // { left: 15, top: 30, height: 20 }

    Set

    Pass an integer to set the position in the input.

    position(input, 11);

    iframe context

    In order to get the correct values for an iframe, we need to pass it in the settings so that it can get a reference to the iframe.

    const frame = document.getElementById('iframe');
    const body = frame.contentDocument.body;
     
    const pos = position(body, { iframe: frame });
    const off = offset(body, { iframe: frame });

    You may also need to get the offset of the iframe to position things correctly. For this there is utility that you can use to get the offset.

    import { getOffset } from 'caret-pos';
     
    const frameOffset = getOffset(frame);
      off.left += frameOffset.left;
      off.top += frameOffset.top;

    shadow caret

    When getting the offset, in certain cases a "shadow caret" is temporarily created and destroyed to facilitate calculations. If one does not wish to mutate the DOM in this way, one can include the noShadowCaret option in the offset:

    import { offset } from 'caret-pos';
     
    offset(el, { noShadowCaret: true });

    Note that doing this might make the offset calculation less accurate in some edge cases.

    custom position

    Passing the customPos option allows specifying a custom cursor position in the element when getting the offset. This will not change the position, but calculate the offset from the custom position rather than the current one. This works for both contentEditable and textarea.

    import { offset } from 'caret-pos';
     
    offset(el, { customPos: 2 });

    Install

    npm i caret-pos

    DownloadsWeekly Downloads

    1,731

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    123 kB

    Total Files

    19

    Last publish

    Collaborators

    • avatar