pincode-input
TypeScript icon, indicating that this package has built-in type declarations

0.4.3 • Public • Published

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/pincode-input@0.4.2/dist/pincode-input.min.css" />

<!-- JS -->
<script src="https://cdn.jsdelivr.net/npm/pincode-input@0.4.2/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.

Package Sidebar

Install

npm i pincode-input

Weekly Downloads

51

Version

0.4.3

License

MIT

Unpacked Size

23.8 kB

Total Files

16

Last publish

Collaborators

  • dgknca