Created
December 15, 2023 05:42
-
-
Save JunsikChoi/5bbe77ccc2a5db612e6ea0d7d164b395 to your computer and use it in GitHub Desktop.
svelte otp input
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script lang="ts"> | |
const digitStyle = | |
'w-12 h-12 text-xl font-bold text-center text-gray-800 bg-gray-200 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-opacity-50'; | |
const handleKeyup = (e: KeyboardEvent) => { | |
const target = e.target as HTMLInputElement; | |
const next = target.dataset.next; | |
const previous = target.dataset.previous; | |
const value = target.value; | |
if (value.length === 1 && next) { | |
const nextInput = document.getElementById(next) as HTMLInputElement; | |
nextInput.focus(); | |
} | |
if (value.length === 0 && previous) { | |
const previousInput = document.getElementById(previous) as HTMLInputElement; | |
previousInput.focus(); | |
} | |
if (value.length === 1 && !next) { | |
const form = target.parentElement as HTMLFormElement; | |
form.submit(); | |
} | |
}; | |
</script> | |
<div class="w-full h-screen flex justify-center items-center bg-gray-100"> | |
<div | |
class="flex flex-col items-center justify-center gap-y-4 bg-primary-500 px-20 py-20 rounded-md" | |
> | |
<h1 class=" text-gray-200 text-3xl font-bold">Enter password for room</h1> | |
<form | |
method="POST" | |
class="flex justify-center items-center gap-x-2" | |
data-group-name="digits" | |
autocomplete="off" | |
> | |
<input | |
class={digitStyle} | |
type="text" | |
id="digit-1" | |
name="digit-1" | |
data-next="digit-2" | |
maxlength="1" | |
on:keyup={handleKeyup} | |
/> | |
<input | |
class={digitStyle} | |
type="text" | |
id="digit-2" | |
name="digit-2" | |
data-next="digit-3" | |
data-previous="digit-1" | |
maxlength="1" | |
on:keyup={handleKeyup} | |
/> | |
<input | |
class={digitStyle} | |
type="text" | |
id="digit-3" | |
name="digit-3" | |
data-next="digit-4" | |
data-previous="digit-2" | |
maxlength="1" | |
on:keyup={handleKeyup} | |
/> | |
<input | |
class={digitStyle} | |
type="text" | |
id="digit-4" | |
name="digit-4" | |
data-next="digit-5" | |
data-previous="digit-3" | |
maxlength="1" | |
on:keyup={handleKeyup} | |
/> | |
<input | |
class={digitStyle} | |
type="text" | |
id="digit-5" | |
name="digit-5" | |
data-next="digit-6" | |
data-previous="digit-4" | |
maxlength="1" | |
on:keyup={handleKeyup} | |
/> | |
<input | |
class={digitStyle} | |
type="text" | |
id="digit-6" | |
name="digit-6" | |
data-previous="digit-5" | |
maxlength="1" | |
on:keyup={handleKeyup} | |
/> | |
</form> | |
</div> | |
</div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment