fede/AlquilaFacil
Public Access
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

arreglado autotab en el pin input

Browse Source
This commit is contained in:
fedpo
2025-07-27 19:48:30 -03:00
parent 7bb6c6abc2
commit 76582013c4
1 changed files with 24 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
Front/src/Componentes/LoginPanel.svelte
View File

@@ -88,7 +88,6 @@
e.preventDefault(); e.preventDefault();
const inputs = document.querySelectorAll(".otp-input"); const inputs = document.querySelectorAll(".otp-input");
let otppin = ""; let otppin = "";
inputs.forEach((x) => { inputs.forEach((x) => {
@@ -119,6 +118,16 @@
modaldata = "Fallo al hacer la request"; modaldata = "Fallo al hacer la request";
} }
} }
function handleInput(index) {
const otpInputs = document.querySelectorAll(".otp-input");
console.log(otpInputs);
if (index === 5) return;
otpInputs[index+1].focus();
}
</script> </script>
{#if modaldata} {#if modaldata}
@@ -190,59 +199,21 @@
<form onsubmit={submitf2a}> <form onsubmit={submitf2a}>
<div class="modal-body"> <div class="modal-body">
<div class="mb-3"> <div class="mb-3">
<label for="f2a" class="form-label" <label for="f2a" class="form-label">
>Ingrese el codigo que tendria que haber llegado Ingrese el codigo que tendria que haber llegado a su email
a su email</label </label>
>
<div class="d-flex gap-2 justify-content-center"> <div class="d-flex gap-2 justify-content-center">
<input {#each Array(6) as _, i}
type="text" <input
class="form-control text-center otp-input" type="text"
maxlength="1" class="form-control text-center otp-input"
inputmode="numeric" maxlength="1"
pattern="[0-9]*" inputmode="numeric"
style="width: 3rem;" pattern="[0-9]*"
/> style="width: 3rem;"
<input oninput={()=> handleInput(i)}
type="text" />
class="form-control text-center otp-input" {/each}
maxlength="1"
inputmode="numeric"
pattern="[0-9]*"
style="width: 3rem;"
/>
<input
type="text"
class="form-control text-center otp-input"
maxlength="1"
inputmode="numeric"
pattern="[0-9]*"
style="width: 3rem;"
/>
<input
type="text"
class="form-control text-center otp-input"
maxlength="1"
inputmode="numeric"
pattern="[0-9]*"
style="width: 3rem;"
/>
<input
type="text"
class="form-control text-center otp-input"
maxlength="1"
inputmode="numeric"
pattern="[0-9]*"
style="width: 3rem;"
/>
<input
type="text"
class="form-control text-center otp-input"
maxlength="1"
inputmode="numeric"
pattern="[0-9]*"
style="width: 3rem;"
/>
</div> </div>
</div> </div>
</div> </div>