In this article, we will explore how to build an OTP (One-Time Password) input box, which is commonly used on many websites. This interactive and engaging UI element allows users to enter their OTP conveniently and efficiently. We will walk through the step-by-step process of creating this functionality using HTML, CSS, and JavaScript.
Setting up the Project:
To get started, set up the project structure by creating a folder called “OTP Input” and opening it in our preferred code editor. Within this folder, create three files: index.html, style.css, and script.js. HTML5 code is used in the index.html file and set up a live server for easier development and testing.
Creating the OTP Input Box UI:
The OTP input box consists of a container, a group of input boxes, and an underline-style design. Creating a container and assigning it a class of “container.” Inside the container, add a green color box that will hold the individual input boxes. Each input box will have a class of “input,” a type of “text,” and an input mode of “numeric” to ensure a numeric keyboard is displayed on mobile devices. Create four input boxes, and their length will be restricted to a single character.
HTML
<!-- index.html --><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>OTP Input</title> <link rel="stylesheet" href="style.css" /> </head> <body> <div class="container"> <div id="inputs" class="inputs"> <input class="input" type="text" inputmode="numeric" maxlength="1" /> <input class="input" type="text" inputmode="numeric" maxlength="1" /> <input class="input" type="text" inputmode="numeric" maxlength="1" /> <input class="input" type="text" inputmode="numeric" maxlength="1" /> </div> </div> <script src="script.js"></script> </body> </html> |
Styling the OTP Input Box:
To style the OTP input box, align it in the center using flexbox properties. Target the input class in the CSS and apply specific styles, such as width, border, margin, text alignment, and font size. Additionally, modify the appearance of the input box when it is in focus by changing the border color to orange.
CSS
/* style.css */.container { display: flex; justify-content: center; align-items: center; min-height: 100vh; } .input { width: 40px; border: none; border-bottom: 3px solid rgba(0, 0, 0, 0.5); margin: 0 10px; text-align: center; font-size: 36px; cursor: not-allowed; pointer-events: none; } .input:focus { border-bottom: 3px solid orange; outline: none; } .input:nth-child(1) { cursor: pointer; pointer-events: all; } |
Implementing JavaScript Functionality:
To enable the input box navigation and interaction, we add JavaScript code. Target the orange color box and add an event listener to handle input events. In the event callback, retrieve the entered value and check if it is a number. If it’s not, remove the value and return it. Next, identify the next input box using the “nextElementSibling” property and move the focus to it. Additionally, add an event listener for key-up events to handle the delete operation. When the backspace or delete key is pressed, move the focus to the previous input box and delete the value from the current input box.
Preventing Input in Inactive Boxes:
To prevent input in inactive input boxes, add CSS styles. By default, all input boxes will have the “cursor: not allowed” and “pointer-events: none” properties. However, override these styles for the first input box, allowing it to receive input.
Javascript
// script.js const inputs = document.getElementById("inputs"); inputs.addEventListener("input", function (e) { const target = e.target; const val = target.value; if (isNaN(val)) { target.value = ""; return; } if (val != "") { const next = target.nextElementSibling; if (next) { next.focus(); } } }); inputs.addEventListener("keyup", function (e) { const target = e.target; const key = e.key.toLowerCase(); if (key == "backspace" || key == "delete") { target.value = ""; const prev = target.previousElementSibling; if (prev) { prev.focus(); } return; } }); |
Output:
Click here to check the live Output.
