OTP TEST

by _sir

HTML

<div class="otp-entry-inputs">
            <input id="codeBox1" data-index="1" class="codeBox" maxlength="1" inputmode="numeric"/>
            <input id="codeBox2" data-index="2" class="codeBox" maxlength="1" inputmode="numeric"/>
            <input id="codeBox3" data-index="3" class="codeBox" maxlength="1" inputmode="numeric"/>
            <span class="divider"></span>
            <input id="codeBox4" data-index="4" class="codeBox" maxlength="1" inputmode="numeric"/>
            <input id="codeBox5" data-index="5" class="codeBox" maxlength="1" inputmode="numeric"/>
            <input id="codeBox6" data-index="6" class="codeBox" maxlength="1" inputmode="numeric"/>
        </div>
        <input id="autoCode" autocomplete="one-time-code">

CSS

input { 
  border: 1px solid gray;
  font-size: 24px;
  border-radius: 8px;
  width: 1em;
  text-align: center;
}

#autoCode {
  width: 7.75em;
}

JavaScript

const distributeCode = (text) => {
	const textArray = text.split('');
  const inputs = document.querySelectorAll('.codeBox');
  inputs.forEach((input, index) => input.value = textArray[index] || '');
};

// Handle paste: intercept and spread to inputs
document.querySelector('.otp-entry-inputs').addEventListener('paste', (event) => {
  event.preventDefault();
  const text = event.clipboardData.getData('text/plain');
  distributeCode(text);
});

document.querySelector('#autoCode').addEventListener('change', (e) => {
	distributeCode(e.target.value);
});