Text Cursor Helper

This library provides fast ways to deal with the text cursor when editing in input, textarea, and div (contenteditable = true) elements:

• Get position of the text cursor on the Oxy coordinate axis
• Move the text cursor to the end of input fields

Reference sources

• Blog HOW TO: Where’s the text cursor?

Installing

Using npm

  npm i text-cusor-helper

Using yarn

  yarn add text-cusor-helper

Once the package is installed, you can import using ES Modules:

import textCursorHelper from 'text-cusor-helper';

Quick Start

1. Get position of the text cursor

Returns X, Y coordinates for positioning of a text cursor within a given text input at a given selection point

Parameters:

Order	Name	Description	Type
1	input	The text input that need deal with text cursor inside it	Element
2	anchor	The element serves as a reference for coordinates calculation (The origin of Oxy coordinates)	textCursorHelper.ANCHOR: ROOT [Default] POSITIONED_PARENT: the nearest parent element having the position attribute is relative or absolute

Example:

const inputElement = document.querySelector(".comment-input")
const position = textCursorHelper.getCursorXY(
  inputElement,
  textCursorHelper.ANCHOR.POSITIONED_PARENT
);

console.log(position)
// { x: 50: y : 50 }

2. Move the text cursor to the end of input fields

Parameters:

None

Example:

const inputElement = document.querySelector(".comment-input")
textCursorHelper.goToEnd();

Show Your Support

Please ⭐️ this repository if this project helped you!