OTP/PIN Input Field Using HTML, CSS & JavaScript.

[@makarishnaik6869]

Awesome video.

[@anrogo4975]

main.js:
const inputs = document.querySelectorAll(".otp-field input");
//console.log(inputs.length);
inputs.forEach((inputs, index) => {
inputs.dataset.index = index;
inputs.addEventListener("paste", handleOnPasteOtp);
inputs.addEventListener("keyup", handleOtp);
//console.log(index);
});
function handleOtp(e) {
const input = e.target;
let value = input.value;
input.value = "";
input.value = value ? value[0] : "";
let fieldIndex = input.dataset.index;
//console.log(inputs.length);
//Si rellenamos el input salta al siguiente automáticamente
if (value.length > 0 && fieldIndex < inputs.length - 1) {
input.nextElementSibling.focus();
}
//Si borramos vuelve al anterior input
if (e.key == "Backspace" && fieldIndex > 0) {
input.previousElementSibling.focus();
}
//Cuando estén todos los campos rellenos se envía el código pin
if (allInputFilled()) {
submit();
}
}
function handleOnPasteOtp(e) {
const data = e.clipboard.getData("text");
const value = data.split("");
if (value.length == inputs.length) {
inputs.forEach((inputs, index) => (input.value = value[index]));
submit();
}
}
function allInputFilled() {
let cont = 0;
inputs.forEach((input, index) => {
if (input.value.length == 0) {
cont += 1;
}
});
//console.log(cont);
if (cont == 0) {
return true;
}
return false;
}
function submit() {
console.log("Submitting...");
let otp = "";
inputs.forEach((input) => {
otp += input.value;
input.disabled = true;
input.classList.add("disabled");
})
console.log(otp);
}

[@animedevil1]

giving me error, index is not defined

[@bhanusunka2840]

Bruh which vs code theme ??

[@top5expensive]

What do you mean?

[@nahidfaraji5069]

Where the source code??

[@top5expensive]

The video shows every part of it, please look carefully at the video and implement what you would like to. If you have any other questions I will do my best to help you. Kind regards