caret-positions

micro lib for control caret

Table of Contents

• Quick start
  • Install
  • Initialization
• Methods
  • setFormElementCaretPosition

Quick start

Install

We support all platforms.

npm

For module bundlers such as Webpack or Browserify.

npm i caret-positions

Include with <script>

1. Download lib
2. Add script to html

<script src="caret-positions.js"></script>

CDN

Recommended for learning purposes, you can use the latest version:

<script src="https://cdn.jsdelivr.net/npm/caret-positions/dist/lib/caret-positions.js"></script>

Recommended for production for avoiding unexpected breakage from newer versions:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/lib/caret-positions.js"></script>

Initialization

ES6

caret-positions as an ES6 module.

import { setFormElementCaretPosition } from 'caret-positions';


const $input = document.querySelector('input'),
      symbolNumberAfterWhichPutCaret = 1

      $input.onfocus = (e) => {
        const target = e.target
        caretPosition.setFormElementCaretPosition(target, symbolNumberAfterWhichPutCaret)
      }

Browser

Exports a global variable called caretPosition. Use it like this

Connect to html file <script src="https://cdn.jsdelivr.net/npm/caret-positions/dist/lib/caret-positions.js" ></script>

<script>
    const $input = document.querySelector('input'),
          symbolNumberAfterWhichPutCaret = 1

    $input.onfocus = (e) => {
        const target = e.target
        caretPosition.setFormElementCaretPosition(target, symbolNumberAfterWhichPutCaret)
    }
</script>

AMD

caret-positions as an AMD module. Use with Require.js, System.js, and so on.

1. Download lib
2. Connect to your module loader

requirejs(['caret-positions'], function(caretPosition) {

    const $input = document.querySelector('input'),
    symbolNumberAfterWhichPutCaret = 1

    $input.onfocus = (e) => {
        const target = e.target
        caretPosition.setFormElementCaretPosition(target, symbolNumberAfterWhichPutCaret)
    }

});

Methods

setFormElementCaretPosition

set caret position on form element like input or textarea

Params

• formElement
  • Type: HTMLInputElement,HTMLTextAreaElement
• symbolNumberAfterWhichPutCaret
  • Type: number

Example

const $input = document.querySelector('input'),
      symbolNumberAfterWhichPutCaret = 1

$input.onfocus = (e) => {
    const target = e.target
    caretPosition.setFormElementCaretPosition(target, symbolNumberAfterWhichPutCaret)
}

Author

webster6667