A Really Simple Vanilla JS Component for OTP Input | vanilla-otp.js

vanilla-OTP-Input is a simple vanilla JS front-end script plugin that converts a set/group of input fields into a One Time Password (OTP) or PIN code input.

It can be used to enhance the security of your application by facilitating a secure way for users to authenticate their identity.

Must Read: Fully Customizable One Time Password OTP Component | ng-otp-input

How to make use of it:

1. Download and import the vanilla-otp.js library.

<script src="vanilla-otp.js"></script>

2. In HTML, create a container block and put some <input> text/number/password type according to your OTP length:

<!-- 6 digits = 6 inputs -->
<div id="otp-input">

3. Start by passing either the container selector or the container element itself, to the constructor:

let OTPInputBySelector = new VanillaOTP("#otp-input1");
let OTPInputByElement = new VanillaOTP(document.querySelector("#otp-input2"));

4. You can have it sync with a hidden input if you want:

const OTPContainer = document.querySelector("#otp-input");
const OTPHiddenInput = document.querySelector("input[name=otp]");

let OTPInput = new VanillaOTP(OTPContainer, OTPHiddenInput);
// now the hidden input will always have the concatted value

5. Use .getValue() if you want the value serialized programmatically:

let otp = OTPInput.getValue();

6. Use .setEmptyChar() to set a surrogate for empty input values (default is a space):

// let's say the input boxes are now [1][2][ ][ ][3][4]
// the final value would become '12**34'

See Demo And Download


Official Website(shuqikhor): Click Here

This superior jQuery/javascript plugin is developed by shuqikhor. For extra advanced usage, please go to the official website.

Related Posts


Responsive Multiple Selection Combo Box using Bootstrap 3 | MagicSuggest

MagicSuggest is an easy-to-use jQuery plugin for creating a combo menu that allows you to select multiple items from a dropdown list with typing and auto-complete support….


Material Design Inspired Tab UI In Vanilla JavaScript

Material Design tab vanilla JS implements a material design-inspired tab component with a click ripple effect and an active sliding menu cursor. Must Read: Responsive Accessible Tabs…


Simple Countdown Timer App In jQuery

The countdown is a front-end application that allows starting the countdown with two options: set a target date or write the number of countdown days. A countdown…


Add Animation to Your HTML5 Pages | animate.js

animate.js is a small JavaScript library that provides a convenient way to apply CSS animations powered by Animate.css to DOM elements without writing any CSS. Easily apply…


Responsive Hover Parallax Cards With Vuejs

Vue Responsive Parallax Cards Hover Create response cards with a scroll-triggered parallax effect in your Vue.js application. Must Read: jQuery Sliding Display Your Content Like a Deck…


Responsive Pure CSS Only Accordion & Tabs Component

Responsive pure CSS accordion tabs and tabs will automatically convert to a vertical accordion interface on mobile devices. Must Read: Create Dynamic Accordion Giving JSON Data Using…

Leave a Reply

Your email address will not be published. Required fields are marked *