<div class="ap-otp-inputs" data-username="otibij" data-channel="email" data-nonce="0-8bf87e338f" data-length="6" data-form="registration">
<input class="ap-otp-input" type="tel" maxlength="1" data-index="0"><input class="ap-otp-input" type="tel" maxlength="1" data-index="1"><input class="ap-otp-input" type="tel" maxlength="1" data-index="2"><input class="ap-otp-input" type="tel" maxlength="1" data-index="3"><input class="ap-otp-input" type="tel" maxlength="1" data-index="4"><input class="ap-otp-input" type="tel" maxlength="1" data-index="5"></div>
.ap-otp-input{
border: 3px solid #ebebeb;
border-radius: 18px;
width: 10%;
height: 100px;
margin: 4px;
text-align: center;
font-size: 35px;
}
.ap-otp-input:focus{
outline: none !important;
border: 3px solid #1f6feb;
transition: 0.12s ease-in;
}
const $inp = $(".ap-otp-input");
$inp.on({
paste(ev) { // Handle Pasting
const clip = ev.originalEvent.clipboardData.getData('text').trim();
// Allow numbers only
if (!/\d{6}/.test(clip)) return ev.preventDefault(); // Invalid. Exit here
// Split string to Array or characters
const s = [...clip];
// Populate inputs. Focus last input.
$inp.val(i => s[i]).eq(5).focus();
},
input(ev) { // Handle typing
const i = $inp.index(this);
if (this.value) $inp.eq(i + 1).focus();
},
keydown(ev) { // Handle Deleting
const i = $inp.index(this);
if (!this.value && ev.key === "Backspace" && i) $inp.eq(i - 1).focus();
}
});
This Pen doesn't use any external CSS resources.