svelte otp input

otp.svelte

<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>