pincode-input

A very useful pure javascript library to creating pin code inputs.

Inspired by vue-pincode-input

Demo | Codepen

Install

npm i pincode-input

import PincodeInput from 'pincode-input'
import 'pincode-input/dist/pincode-input.min.css'

Include

<!-- CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/pincode-input.min.css" />

<!-- JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/pincode-input.min.js"></script>

Usage

<div id="demo"></div>

new PincodeInput('#demo', {
  count: 4,
  secure: false,
  previewDuration: 200,
  onInput: (value) => {
    console.log(value)
  }
})

Parameters

| Name | Type | Default | Description | | :-------------- | :------ | :------ | :--------------------------------------------------------------------- | | count | number | 4 | Count of the cells. | | secure | boolean | false | Set to true to use the inputs with type="password" | | previewDuration | number | 200 | Duration of the character preview. Valid when used with secure: true | | numeric | boolean | true | Do the inputs only accept numbers? | | uppercase | boolean | true | Convert the characters to uppercase? |

Events

| Name | Description | | :------ | :--------------------- | | onInput | Returns current value. |