PincodeInput-JS

Seamlessly create a user-friendly PIN code input experience with PincodeInput-JS. This lightweight JavaScript library is specially designed to handle numeric input fields required for Two-Factor Authentication (2FA) and other security-related use cases. It elegantly manages the focus transition between individual digit fields, ensuring a smooth and intuitive entry process similar to professional financial and security applications.

Features of PincodeInput-JS include:

• Auto-focus on next field after each digit is entered.
• Easy navigation back and forth with just the keyboard.
• Paste support allowing users to input a complete code in a single action.
• Customizable input fields for different styles and layouts.
• Built-in validation to ensure only numeric input is accepted.
• Support password mode to hide the input value with custom placeholder.
• Support for both mobile and desktop devices.
• No dependencies on other libraries or frameworks.

Installation

To install PincodeInput-JS in your project, simply run the following command in your terminal:

pnpm i @carry0987/pincode-input

Usage

UMD

You can see the UMD example here:
Code
Demo

ES Module

import { PincodeInput } from '@carry0987/pincode-input';

const pincodeInput = new PincodeInput('#pincode', {
    autoFocus: true,
    allowPaste: true,
    secure: false,
    forceDigits: true,
    length: 6,
    styles: {
        '.pincode-grid': {
            'margin': '5px',
            'padding': '5px',
            'width': '50px',
            'text-align': 'center',
            'text-align': 'center',
            'line-height': 'normal',
            'display': 'flex',
            'align-items': 'center',
            'justify-content': 'center'
        },
        '.pincode-grid.pincode-focus': {
            'border-bottom': '5px solid #007bff'
        }
    },
    onInput: (value, idx) => {
        document.getElementById('pincode-value').innerText = value;
        console.log(idx);
    },
    onComplete: (value) => {
        console.log('Complete', pincodeInput.value);
    }
});