<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();
  }
  
});




External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js