OTP Input Field Using HTML, CSS, & JavaScript

Here I have shared HTML, CSS and Javascript code for a simple OTP input filed that gives you idea to create an OTP input field for a website.

Demo of the OTP Input Field

HTML Structure

<!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>

JavaScript Code

Here is the JavaScript code that handles the OTP input logic. Put this code in the <script> tag of the index.html.

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

    // Function to focus on the next input field
    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 to focus on the previous input field
    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);
            }
        });
    });
});