Customizable One-time Password Input Plugin - jQuery OTP Designer

OTP Designer is a lightweight and easy-to-use jQuery plugin to help generate customizable one-time password (OTP) input fields to your web apps and websites. OTPs are commonly used in two-factor authentication (2FA) or multi-factor authentication (MFA) systems. This plugin can ease the process of inputting OTPs during such authentications.

It allows customization of the number of OTP input fields, catering to various OTP lengths. Furthermore, it provides flexibility in terms of the type of input, enabling developers to restrict the input to only numeric or extend it to alphanumeric, based on project requirements.

How to use it:

1. Download and import the OTP Designer plugin into your jQuery project.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/dist/otpdesigner.min.js"></script>

2. Create an empty container to hold the OTP input.

<div id="otp_target"></div>

3. Initialize the plugin on the DIV container.

$('#otp_target').otpdesigner({
  // get the password string you just typed
  typingDone: function (code) {
    console.log('Entered OTP code: ' + code);
  },
});

4. Get the entered OTP code for further use.

let result = $('#otp_target').otpdesigner('code');

5. Available options to config the OTP input.

$('#otp_target').otpdesigner({

  // max number of input fields
  length: 6,

  // only numbers or not
  onlyNumbers: false,

  // additional CSS classes
  inputsClasses: '',
  inputsParentClasses: '',

  // a function that will be executed when the user click on Enter key
  enterClicked: null,
  
});

5. More API methods.

// set values
$('#otp_target').otpdesigner('set', Value);

// focus on the OTP input
$('#otp_target').otpdesigner('focus');

// return the hidden input which stores the OTP code value
$('#otp_target').otpdesigner('hiddenInput');

// get & set option
$('#otp_target').otpdesigner('option');

// add CSS class
$('#otp_target').otpdesigner('addClass');

// remove CSS class
$('#otp_target').otpdesigner('removeClass');

// clear values
$('#otp_target').otpdesigner('clear');

Changelog:

v2.1.0 (2023-08-31)

• add the 'option', 'addClass', 'removeClass' methods.

v2.1.0 (2023-08-29)

• add the 'clear' method.

v2.0.2 (2023-08-28)

• bugfixes

v2.0.1 (2023-08-19)

• replace the inputs with fake inputs to handle to avoid event.key problem
• bugfixes

v2.0.0 (2023-08-17)

• replace the inputs with fake inputs to handle to avoid event.key problem
• bugfixes

---

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