Generate Pincode Input Component With JavaScript

How to make use of it:

1. Install and import the Pincode input element.

# NPM

$ npm i pincode-input

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

2. Or load the next information within the doc.

<link rel="stylesheet" href="./dist/pincode-input.min.css" />
<script src="./dist/pincode-input.min.js"></script>

3. Create a container component for the Pincode input element.

<div class="pincode-input-container"></div>

4. Initialize the element and get the code value utilizing the onInput performance.

new PincodeInput('.pincode-input-container', {
    onInput: (value) => {
      console.log(value)
    }
})

5. Determine whether or not to make use of password input.

new PincodeInput('.pincode-input-container', {
    secure: true
})

6. Determine the variety of code input to generate.

new PincodeInput('.pincode-input-container', {
    count: 6
})

7. Set the length of the character preview when utilizing password input.

new PincodeInput('.pincode-input-container', {
    previewDuration: 300
})

Configurable Pincode Input Component, Pincode-input Plugin/Github

See Demo And Download