How to Build OTP Input Field using HTML, CSS, and JavaScript

One-Time Passwords (OTPs) are commonly used for user authentication and verification in various applications. Implementing a secure and user-friendly OTP input field is crucial for providing a seamless authentication experience.

In this article, we’ll guide you through the process of building an OTP input field using HTML, CSS, and JavaScript.

Building an OTP Input Field with JavaScript

HTML Structure

Start by creating the HTML structure for the OTP input field. In this example, we’ll use a form with an input field for each digit of the OTP:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OTP Input Field Example</title>
    <style>
        /* Optional: Styling for demonstration purposes */
        body {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
        }
        #otpForm {
            display: flex;
        }
        .otpInput {
            width: 40px;
            height: 40px;
            font-size: 18px;
            text-align: center;
            margin: 0 5px;
        }
    </style>
</head>
<body>

    <form id="otpForm">
        <input type="text" class="otpInput" maxlength="1">
        <input type="text" class="otpInput" maxlength="1">
        <input type="text" class="otpInput" maxlength="1">
        <input type="text" class="otpInput" maxlength="1">
    </form>

    <script>
        // JavaScript code will go here
    </script>

</body>
</html>

In this example, we have a form (otpForm) containing four input fields (otpInput) to capture each digit of the OTP.

JavaScript Implementation

Now, let’s implement the JavaScript code to handle the OTP input logic:

document.addEventListener('DOMContentLoaded', function () {
    const otpInputs = document.querySelectorAll('.otpInput');

    function focusNext(currentInput) {
        const maxLength = parseInt(currentInput.maxLength, 10);
        const currentInputIndex = Array.from(otpInputs).indexOf(currentInput);

        if (currentInput.value.length === maxLength) {
            // Move focus to the next input field
            const nextInput = otpInputs[currentInputIndex + 1];
            if (nextInput) {
                nextInput.focus();
            } else {
                // Submit the form or trigger another action when all inputs are filled
                console.log('OTP Entered:', getOTP());
            }
        }
    }

    function focusPrevious(currentInput) {
        const currentInputIndex = Array.from(otpInputs).indexOf(currentInput);

        if (currentInput.value.length === 0) {
            const previousInput = otpInputs[currentInputIndex - 1];
            if (previousInput) {
                previousInput.focus();
            }
        }
    }

    function getOTP() {
        // Concatenate values of all input fields to get the complete OTP
        return Array.from(otpInputs).map(input => input.value).join('');
    }

    // Add event listeners for input and keydown events
    otpInputs.forEach(input => {
        input.addEventListener('input', function () {
            focusNext(this);
        });

        input.addEventListener('keydown', function (event) {
            if (event.key === 'Backspace') {
                focusPrevious(this);
            }
        });
    });
});

Here’s an explanation of the JavaScript code:

  • The focusNext function is called when a digit is entered into an input field. It checks if the input field is filled to its maximum length and moves the focus to the next input field. If there is no next input field, it can trigger another action, such as submitting the form or verifying the OTP.
  • The getOTP function is used to concatenate the values of all input fields and return the complete OTP.
  • The focusPrevious function is introduced to move the focus to the previous input field when the Backspace key is pressed with an empty input.
  • Event listeners are added to each input field for both the input and keydown events.
  • The “keydown” event listener checks if the Backspace key is pressed and, if so, calls the focusPrevious function.

Testing the Implementation

When you run this HTML file in a browser, you can enter digits into the OTP input fields, and the focus will automatically move to the next field once a digit is entered.

Use the Backspace key to move the focus back to the previous field, allowing you to correct or remove digits The complete OTP will be logged to the console when all fields are filled.

Feel free to customize the styling and functionality based on your specific requirements, such as integrating with a backend for OTP verification or enhancing the user interface.