User-friendly One-Time Password Input Plugin - jQuery SnapOTP

SnapOTP is a lightweight jQuery plugin that transforms a DIV element into a user-friendly multi-field OTP (One-Time Password) input component.

It has the ability to handle the complex user interactions needed for one-time password entry, including auto-focus progression, smart paste handling, and keyboard navigation.

More Features:

• Configurable OTP Length: You decide how many digits your OTP requires.
• Reset Functionality: A resetSnapOTP method clears all inputs.
• Event Callbacks: Provides onComplete, onChange, and onEnter events for custom logic.
• 3 pre-built styles: Offers 'box', 'underline', and 'circle' styles via a data-style attribute.
• Number & Text: Support for both numeric and text input types.

How to use it:

1. Download and import the SnapOTP plugin's files into your jQuery project.

<!-- jQuery is required -->
<script src="/path/to/cdn/jquery.min.js"></script>

<!-- jQuery snapotp plugin -->
<link rel="stylesheet" href="/path/to/snapotp.css">
<script src="/path/to/snapotp.js"></script>

2. Create an empty DIV element where you want the OTP inputs to appear.

<div id="example"></div>

3. Call the plugin on this DIV element to generate a basic OTP input.

$('#example').snapOTP({
  // options here
});

4. Customize your OTP input with the following options:

• digits: (Number) Sets the quantity of OTP input fields. Default: 6.
• onComplete: (Function) Callback triggered when all OTP digits are filled. Receives the complete OTP string as an argument.
• onChange: (Function) Callback triggered whenever any OTP digit changes. Receives the current OTP string.
• onEnter: (Function) Callback triggered when the Enter key is pressed while an OTP input is focused. Receives the current OTP string.
• type: (String) Sets the type attribute for the generated input fields. Accepts 'number' or 'text'. Default: 'text'.
• style: (String) Defines the visual style of inputs using a data-style attribute. Options: 'box', 'underline', 'circle'. Default: 'box'.
• containerClass: (String) Custom class to add to the main container div. Default: "".
• inputClass: (String) Custom class to add to each generated input field. Default: "".

$('#example').snapOTP({
  digits: 6,
  onComplete: function (code) {},
  onChange: function () {},
  onEnter: function () {},
  containerClass: "",
  inputClass: "",
  type: "text",
  style: "box",
});

5. You can also specify the style for each OPT input using the data-style attribute:

<div id="example" data-style="underline"></div>
<div id="example" data-style="circle"></div>

6. Clear all OTP input fields and sets focus back to the first one.

document.getElementById('otp-container').resetSnapOTP();

How It Works:

SnapOTP generates the required number of input fields within the target container. Each input is configured with a maxlength of 2 to handle both single character input and paste operations that might insert multiple characters at once.

The plugin uses jQuery event delegation to manage focus progression. When a user types in a field, the input event handler checks the value length and automatically moves focus to the next field.

For paste operations, the plugin intercepts the clipboard data, splits it into individual characters, and distributes them across the available fields starting from the current position.

Keyboard navigation works through keydown event handlers that detect arrow keys and backspace. If the current field is empty and backspace is pressed, it clears the previous field and moves focus backward.

The plugin maintains state by querying all input values when triggering callbacks. Rather than storing the complete code in a variable, it reconstructs the current value each time by mapping over the input fields.

FAQs:

Q: Can I validate individual digits as they're entered? A: The onChange callback fires after each character input, giving you access to the current partial or complete code. You can implement real-time validation by checking the code length and format in this callback. For server-side validation, use the onComplete callback which only fires when all fields are filled.

Q: How does paste handling work with different OTP formats? A: The plugin extracts text from clipboard data and splits it by character, so it works with codes that contain spaces, dashes, or other separators. It automatically filters out non-relevant characters and fills only the available input fields. I've tested this with SMS messages that include extra text around the actual code.

Q: What happens if a user pastes more digits than there are input fields? A: The plugin will fill the available input fields with the pasted digits. For instance, if you have 4 input fields and the user pastes "123456", the fields will contain "1", "2", "3", "4", and the focus will be on the last (fourth) input. The extra digits are effectively ignored.

Q: Can I customize the appearance beyond the built-in styles? A: Yes, SnapOTP generates standard input elements with predictable class names. You can target .snap-otp-input in your CSS for global styling or use the inputClass option to add your own classes. The data-style attribute on inputs also provides a hook for style-specific customization.

Changelog:

v1.0.2 (05/26/2025)

• Update

v1.0.2 (05/25/2025)

• Renamed JS & CSS
• Removed unwanted js and scss file

---

This awesome jQuery plugin is developed by nitinramrathod. For more Advanced Usages, please check the demo page or visit the official website.