69 lines
1.8 KiB
TypeScript
69 lines
1.8 KiB
TypeScript
class OtpForm extends HTMLElement {
|
|
observer?: MutationObserver;
|
|
|
|
constructor() {
|
|
super();
|
|
}
|
|
|
|
connectedCallback() {
|
|
this.observer = new MutationObserver(() => {
|
|
this.clearInputs();
|
|
this.configureInputs();
|
|
});
|
|
this.observer.observe(this, { childList: true, subtree: true });
|
|
}
|
|
|
|
disconnectedCallback() {
|
|
this.observer?.disconnect();
|
|
}
|
|
|
|
clearInputs() {
|
|
console.log("clearing all inputs");
|
|
const inputs = this.querySelectorAll(
|
|
'input:not([type="submit"])',
|
|
) as NodeListOf<HTMLInputElement>;
|
|
for (const input of inputs) {
|
|
input.value = "";
|
|
}
|
|
}
|
|
|
|
configureInputs() {
|
|
this.observer?.disconnect();
|
|
const inputs = this.querySelectorAll(
|
|
'input:not([type="submit"])',
|
|
) as NodeListOf<HTMLInputElement>;
|
|
const form = this.querySelector("form") as HTMLFormElement;
|
|
|
|
for (const input of inputs) {
|
|
input.addEventListener("focus", () => {
|
|
input.select();
|
|
});
|
|
|
|
input.addEventListener("input", () => {
|
|
if (input.value.length > 0) {
|
|
input.value = input.value.slice(0, 1).toLocaleUpperCase();
|
|
const nextInput = input.nextElementSibling as HTMLInputElement;
|
|
if (nextInput) {
|
|
nextInput.focus();
|
|
return;
|
|
}
|
|
|
|
const submitButton = form.querySelector(
|
|
'input[type="submit"]',
|
|
) as HTMLInputElement;
|
|
submitButton.focus();
|
|
let areAllInputsEntered = true;
|
|
inputs.forEach((input) => {
|
|
areAllInputsEntered = areAllInputsEntered && input.value.length > 0;
|
|
});
|
|
if (areAllInputsEntered) {
|
|
form.requestSubmit(submitButton);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
customElements.define("otp-form", OtpForm);
|