Configurable Pincode Input Component With JavaScript

Category: Form , Javascript | March 19, 2021
Author: dgknca
Views Total: 206 views
Official Page: Go to website
Last Update: March 19, 2021
License: MIT

Preview:

Configurable Pincode Input Component With JavaScript

Description:

A simple yet configurable Pincode input component to provide a cross-platform Pincode login experience for your web apps.

How to use it:

1. Install and import the Pincode input component.

# NPM

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

2. Or load the following files in the document.

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

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

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

4. Initialize the component and get the code value using the onInput function.

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

5. Determine whether to use password input. Default: false.

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

6. Determine the number of code input to generate. Default: 4.

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

7. Set the duration of the character preview when using password input. Default: 200.

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

You Might Be Interested In:


Leave a Reply