Hi makenzi.exc,
Refer below example for creating the OTP input field.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</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>
<style type="text/css">
body { font-family: Arial; font-size: 10pt; }
.container { display: flex; justify-content: center; align-items: center; }
.input { width: 40px; border: none; border-bottom: 3px solid rgba(0, 0, 0, 0.5); margin: 0 10px; text-align: center; cursor: not-allowed; pointer-events: none; }
.input:focus { border-bottom: 3px solid purple; outline: none; }
.input:nth-child(1) { cursor: pointer; pointer-events: all; }
</style>
<script>
var inputs = document.getElementById("inputs");
inputs.addEventListener("input", function (e) {
var target = e.target;
var val = target.value;
if (isNaN(val)) {
target.value = "";
return;
}
if (val != "") {
var next = target.nextElementSibling;
if (next) {
next.focus();
}
}
});
inputs.addEventListener("keyup", function (e) {
var target = e.target;
var key = e.key.toLowerCase();
if (key == "backspace" || key == "delete") {
target.value = "";
var prev = target.previousElementSibling;
if (prev) {
prev.focus();
}
return;
}
});
</script>
</body>
</html>
Demo
