SnapOTP jQuery Plugin

SnapOTP is a lightweight and customizable jQuery plugin to create elegant multi-field OTP (One-Time Password) input interfaces. It supports features like auto-focus, keyboard navigation, smart paste handling, reset control, and event callbacks — making it perfect for authentication and verification workflows.

🚀 Features

• 🔢 Configurable OTP digit length
• 🎯 Auto-focus to next field
• 🔄 Smart paste support (entire OTP from clipboard)
• 🎹 Keyboard navigation with Arrow keys & Backspace
• 🔁 Reset method (resetSnapOTP)
• 🔔 Events: onComplete, onChange, onEnter
• 🧑‍🎨 Input styling via data-style attribute (box, underline, circle)

📦 Installation

1. Include jQuery

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

2. Include SnapOTP JS and CSS

<link rel="stylesheet" href="snapotp.css">
<script src="snapotp.js"></script>

🧑‍💻 Usage

HTML

<div id="otp"></div>

JavaScript

$('#otp').snapOTP({
  digits: 6,
  onComplete: function (code) {
    console.log('OTP Entered:', code);
  },
  onChange: function (code) {
    console.log('OTP Changed:', code);
  },
  onEnter: function (code) {
    alert('Enter pressed: ' + code);
  },
  type: 'number', // or 'text'
  style: 'box' // box | underline | circle
});

🧪 Methods

Reset OTP inputs

$('#otp').resetSnapOTP();

This will clear all fields and focus on the first input.

Get Value

$('#otp').getValue();

This will get value of input and return it.

🎨 Styling

SnapOTP supports basic styling using the data-style attribute on the container:

<div id="otp" data-style="underline"></div>

Available styles:

• box (default)
• underline
• circle

Customize styles in your CSS based on the [data-style] attribute.

📁 File Structure

📦 /dist/snapotp-jquery
├── 📄 snapotp.js     – Core plugin logic (jQuery-based)
└── 🎨 snapotp.css    – Default styling (easily customizable)

👨‍🎨 Author

Nitin Rathod
🔗 GitHub: @nitinramrathod
📧 Email: [email protected]
📱 Mobile: +91-8459556244
📍 Location: Thane, Maharashtra, India

📄 License

Licensed under the MIT License.
Feel free to use, modify, and distribute with attribution.

🌍 Repository

GitHub: https://github.com/nitinramrathod/snapotp-jquery