JSFiddle - React, Tailwind, and code Playground

by Ufuk Ozdemir

HTML

<div id="otp">
	<input type="text" id="first" maxlength="1" /> 
	<input type="text" id="second" maxlength="1" /> 
	<input type="text" id="third" maxlength="1" /> 
	<input type="text" id="fourth" maxlength="1" />
	<input type="text" id="fifth" maxlength="1" /> 
	<input type="text" id="sixth" maxlength="1" />
</div>

JavaScript

document.addEventListener("DOMContentLoaded", function(event) {
    const inputs = document.querySelectorAll('#otp > *[id]');
        for (let i = 0; i < inputs.length; i++) {
            inputs[i].addEventListener('keydown', function(event) {
                if (event.key === "Backspace") {
                    inputs[i].value = '';
                    if (i !== 0) inputs[i - 1].focus();
                } else {
                    if (i === inputs.length - 1 && inputs[i].value !== '') {
                        return true;
                    } else if (event.keyCode > 47 && event.keyCode < 58) {
                        inputs[i].value = event.key;
                        if (i !== inputs.length - 1) inputs[i + 1].focus();
                        event.preventDefault();
                    } else if (event.keyCode > 64 && event.keyCode < 91) {
                        inputs[i].value = String.fromCharCode(event.keyCode);
                        if (i !== inputs.length - 1) inputs[i + 1].focus();
                        event.preventDefault();
                    }
                }
            });
        }
});