Person-friendly One-Time Password Enter Plugin – jQuery SnapOTP

SnapOTP is a light-weight jQuery plugin that transforms a DIV component right into a user-friendly multi-field OTP (One-Time Password) enter part.

It has the flexibility to deal with the complicated person interactions wanted for one-time password entry, together with auto-focus development, sensible paste dealing with, and keyboard navigation.

Extra Options:

• Configurable OTP Size: You resolve what number of digits your OTP requires.
• Reset Performance: A resetSnapOTP methodology clears all inputs.
• Occasion Callbacks: Gives onComplete, onChange, and onEnter occasions for customized logic.
• 3 pre-built kinds: Provides ‘field’, ‘underline’, and ‘circle’ kinds by way of a data-style attribute.
• Quantity & Textual content: Assist for each numeric and textual content enter sorts.

Easy methods to use it:

1. Obtain and import the SnapOTP plugin’s information into your jQuery venture.

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

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

2. Create an empty DIV component the place you need the OTP inputs to look.

<div id="instance"></div>

3. Name the plugin on this DIV component to generate a fundamental OTP enter.

$('#instance').snapOTP({
  // choices right here
});

4. Customise your OTP enter with the next choices:

• digits: (Quantity) Units the amount of OTP enter fields. Default: 6.
• onComplete: (Perform) Callback triggered when all OTP digits are stuffed. Receives the entire OTP string as an argument.
• onChange: (Perform) Callback triggered every time any OTP digit modifications. Receives the present OTP string.
• onEnter: (Perform) Callback triggered when the Enter secret’s pressed whereas an OTP enter is concentrated. Receives the present OTP string.
• sort: (String) Units the sort attribute for the generated enter fields. Accepts 'quantity' or 'textual content'. Default: 'textual content'.
• model: (String) Defines the visible model of inputs utilizing a data-style attribute. Choices: 'field', 'underline', 'circle'. Default: 'field'.
• containerClass: (String) Customized class so as to add to the primary container div. Default: "".
• inputClass: (String) Customized class so as to add to every generated enter subject. Default: "".

$('#instance').snapOTP({
  digits: 6,
  onComplete: perform (code) {},
  onChange: perform () {},
  onEnter: perform () {},
  containerClass: "",
  inputClass: "",
  sort: "textual content",
  model: "field",
});

5. You too can specify the model for every OPT enter utilizing the data-style attribute:

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

6. Clear all OTP enter fields and units focus again to the primary one.

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

How It Works:

SnapOTP generates the required variety of enter fields throughout the goal container. Every enter is configured with a maxlength of two to deal with each single character enter and paste operations which may insert a number of characters directly.

The plugin makes use of jQuery occasion delegation to handle focus development. When a person sorts in a subject, the enter occasion handler checks the worth size and routinely strikes focus to the following subject.

For paste operations, the plugin intercepts the clipboard information, splits it into particular person characters, and distributes them throughout the accessible fields ranging from the present place.

Keyboard navigation works by means of keydown occasion handlers that detect arrow keys and backspace. If the present subject is empty and backspace is pressed, it clears the earlier subject and strikes focus backward.

The plugin maintains state by querying all enter values when triggering callbacks. Moderately than storing the entire code in a variable, it reconstructs the present worth every time by mapping over the enter fields.

FAQs:

Q: Can I validate particular person digits as they’re entered? A: The onChange callback fires after every character enter, providing you with entry to the present partial or full code. You possibly can implement real-time validation by checking the code size and format on this callback. For server-side validation, use the onComplete callback which solely fires when all fields are stuffed.

Q: How does paste dealing with work with completely different OTP codecs? A: The plugin extracts textual content from clipboard information and splits it by character, so it really works with codes that comprise areas, dashes, or different separators. It routinely filters out non-relevant characters and fills solely the accessible enter fields. I’ve examined this with SMS messages that embody further textual content across the precise code.

Q: What occurs if a person pastes extra digits than there are enter fields? A: The plugin will fill the accessible enter fields with the pasted digits. As an illustration, if in case you have 4 enter fields and the person pastes “123456”, the fields will comprise “1”, “2”, “3”, “4”, and the main target shall be on the final (fourth) enter. The additional digits are successfully ignored.

Q: Can I customise the looks past the built-in kinds? A: Sure, SnapOTP generates customary enter parts with predictable class names. You possibly can goal .snap-otp-input in your CSS for world styling or use the inputClass possibility so as to add your individual courses. The data-style attribute on inputs additionally offers a hook for style-specific customization.

Changelog:

v1.0.2 (05/26/2025)

v1.0.2 (05/25/2025)

• Renamed JS & CSS
• Eliminated undesirable js and scss file

This superior jQuery plugin is developed by nitinramrathod. For extra Superior Usages, please examine the demo web page or go to the official web site.