Improve OTP code input
This commit is contained in:
parent
bfe65b0216
commit
5300b1a8f9
@ -15,12 +15,12 @@
|
|||||||
<input type="hidden" id="code" name="code"/>
|
<input type="hidden" id="code" name="code"/>
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<div id="otp" class="inputs d-flex flex-row justify-content-center mt-2">
|
<div id="otp" class="inputs d-flex flex-row justify-content-center mt-2">
|
||||||
<input class="m-2 text-center form-control rounded" type="text" id="i1" maxlength="1" autofocus/>
|
<input class="m-2 text-center form-control rounded" type="text" id="i1" maxlength="6" autofocus/>
|
||||||
<input class="m-2 text-center form-control rounded" type="text" id="i2" maxlength="1"/>
|
<input class="m-2 text-center form-control rounded" type="text" id="i2" maxlength="6"/>
|
||||||
<input class="m-2 text-center form-control rounded" type="text" id="i3" maxlength="1"/>
|
<input class="m-2 text-center form-control rounded" type="text" id="i3" maxlength="6"/>
|
||||||
<input class="m-2 text-center form-control rounded" type="text" id="i4" maxlength="1"/>
|
<input class="m-2 text-center form-control rounded" type="text" id="i4" maxlength="6"/>
|
||||||
<input class="m-2 text-center form-control rounded" type="text" id="i5" maxlength="1"/>
|
<input class="m-2 text-center form-control rounded" type="text" id="i5" maxlength="6"/>
|
||||||
<input class="m-2 text-center form-control rounded" type="text" id="i6" maxlength="1"/>
|
<input class="m-2 text-center form-control rounded" type="text" id="i6" maxlength="6"/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
@ -43,9 +43,19 @@ function OTPInput() {
|
|||||||
inputs[i].value = "";
|
inputs[i].value = "";
|
||||||
}
|
}
|
||||||
|
|
||||||
let currIndex = 0;
|
|
||||||
|
function getCurrIndex() {
|
||||||
|
for(const [i, input] of inputs.entries()) {
|
||||||
|
if(input.value === "")
|
||||||
|
return i;
|
||||||
|
}
|
||||||
|
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
document.addEventListener('keydown', (event) => {
|
document.addEventListener('keydown', (event) => {
|
||||||
|
let currIndex = getCurrIndex();
|
||||||
if (event.key === "Backspace") {
|
if (event.key === "Backspace") {
|
||||||
if (inputs[currIndex].value != "") {
|
if (inputs[currIndex].value != "") {
|
||||||
inputs[currIndex].value = '';
|
inputs[currIndex].value = '';
|
||||||
@ -54,28 +64,41 @@ function OTPInput() {
|
|||||||
inputs[currIndex - 1].focus();
|
inputs[currIndex - 1].focus();
|
||||||
currIndex--;
|
currIndex--;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
// Code has already been typed entirely
|
event.preventDefault();
|
||||||
else if (currIndex === inputs.length - 1 && inputs[currIndex].value !== '')
|
return;
|
||||||
{
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
function handleChange(index) {
|
||||||
|
const input = inputs[index];
|
||||||
|
|
||||||
|
// Remove non-numeric values from input
|
||||||
|
const correctValue = input.value.replace(/[^0-9]/g, "");
|
||||||
|
if (correctValue !== input.value)
|
||||||
|
input.value = correctValue;
|
||||||
|
|
||||||
|
if(correctValue.length == 0) {
|
||||||
|
input.focus();
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Add new digit
|
input.value = correctValue.substring(0, 1);
|
||||||
else if ((event.keyCode >= 48 && event.keyCode <= 57)
|
|
||||||
|| (event.keyCode >= 96 && event.keyCode <= 105)){
|
if (index === 5) {
|
||||||
inputs[currIndex].value = event.key;
|
|
||||||
if (currIndex < inputs.length - 1) {
|
|
||||||
inputs[currIndex + 1].focus();
|
|
||||||
currIndex++;
|
|
||||||
}
|
|
||||||
else
|
|
||||||
submitCode();
|
submitCode();
|
||||||
}
|
}
|
||||||
|
else {
|
||||||
|
inputs[index + 1].value = correctValue.substring(1) + inputs[index + 1].value;
|
||||||
|
handleChange(index + 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
event.preventDefault();
|
// Listen to event on all inputs
|
||||||
});
|
for (let i = 0; i < 6; i++) {
|
||||||
|
inputs[i].addEventListener("change", () => handleChange(i))
|
||||||
|
inputs[i].addEventListener("keyup", () => handleChange(i))
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function submitCode() {
|
function submitCode() {
|
||||||
|
Loading…
Reference in New Issue
Block a user