The OTP class is designed to handle One-Time Password (OTP) input fields, ensuring they accept only digits, managing cursor movements, and handling paste events.
- Validates input to ensure only digits are entered.
- Allows pasting a complete OTP into the input fields.
- Automatically moves the cursor to the next input field when a digit is entered.
- Moves focus to the previous input field when backspace is pressed.
Include the OTP class in your project by adding it to your JavaScript file. Ensure you have input elements with a specific class name in your HTML.
Add the following input fields to your HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OTP Input Example</title>
</head>
<body>
<input type="text" class="otp-input" maxlength="1" />
<input type="text" class="otp-input" maxlength="1" />
<input type="text" class="otp-input" maxlength="1" />
<input type="text" class="otp-input" maxlength="1" />
<input type="text" class="otp-input" maxlength="1" />
<input type="text" class="otp-input" maxlength="1" />
<!-- Make sure you are using type of module to leverage imports and exports -->
<script src="script.js" type="module"></script>
</body>
</html>In script.js file, import "OTP" from OTP.js and create a new OTP instance passing the classname of OTP input fields
import OTP from './OTP.js'
new OTP('otp-input')Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
Please make sure to update tests as appropriate.