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">
  <input>
  <input>
  <input>
  <input>
  <input>
  <input>
</div>

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):

OTPInput.setEmptyChar('*');
// 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.