tailgrids
Version:
Handcrafted Library of Tailwind CSS UI Components & Blocks for HTML, React and Vue.
109 lines (101 loc) • 3.84 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>OTP | TailGrids</title>
<link
rel="shortcut icon"
href="../../assets/images/favicon.svg"
type="image/x-icon"
/>
<link rel="stylesheet" href="../../assets/css/tailwind.css" />
</head>
<body>
<!-- ====== OTP Start -->
<section class="bg-white py-20 dark:bg-dark">
<div class="container">
<div>
<form id="otp-form" class="flex gap-2">
<input
type="text"
maxlength="1"
class="flex w-[64px] items-center justify-center rounded-lg border border-stroke bg-white p-2 text-center text-2xl font-medium text-gray-5 shadow-xs outline-hidden sm:text-4xl dark:border-dark-3 dark:bg-white/5"
/>
<input
type="text"
maxlength="1"
class="flex w-[64px] items-center justify-center rounded-lg border border-stroke bg-white p-2 text-center text-2xl font-medium text-gray-5 shadow-xs outline-hidden sm:text-4xl dark:border-dark-3 dark:bg-white/5"
/>
<input
type="text"
maxlength="1"
class="flex w-[64px] items-center justify-center rounded-lg border border-stroke bg-white p-2 text-center text-2xl font-medium text-gray-5 shadow-xs outline-hidden sm:text-4xl dark:border-dark-3 dark:bg-white/5"
/>
<input
type="text"
maxlength="1"
class="flex w-[64px] items-center justify-center rounded-lg border border-stroke bg-white p-2 text-center text-2xl font-medium text-gray-5 shadow-xs outline-hidden sm:text-4xl dark:border-dark-3 dark:bg-white/5"
/>
</form>
<p class="mt-1.5 text-sm text-body-color">
This is a hint text to help user.
</p>
</div>
</div>
</section>
<!-- ====== OTP End -->
<script>
document.addEventListener("DOMContentLoaded", () => {
const form = document.getElementById("otp-form");
const inputs = [...form.querySelectorAll("input[type=text]")];
const handleKeyDown = (e) => {
if (
!/^[0-9]{1}$/.test(e.key) &&
e.key !== "Backspace" &&
e.key !== "Delete" &&
e.key !== "Tab" &&
!e.metaKey
) {
e.preventDefault();
}
if (e.key === "Delete" || e.key === "Backspace") {
const index = inputs.indexOf(e.target);
if (index > 0) {
inputs[index - 1].value = "";
inputs[index - 1].focus();
}
}
};
const handleInput = (e) => {
const { target } = e;
const index = inputs.indexOf(target);
if (target.value) {
if (index < inputs.length - 1) {
inputs[index + 1].focus();
}
}
};
const handleFocus = (e) => {
e.target.select();
};
const handlePaste = (e) => {
e.preventDefault();
const text = e.clipboardData.getData("text");
if (!new RegExp(`^[0-9]{${inputs.length}}$`).test(text)) {
return;
}
const digits = text.split("");
inputs.forEach((input, index) => (input.value = digits[index]));
};
inputs.forEach((input) => {
input.addEventListener("input", handleInput);
input.addEventListener("keydown", handleKeyDown);
input.addEventListener("focus", handleFocus);
input.addEventListener("paste", handlePaste);
});
});
</script>
</body>
</html>