1 line
3 KiB
JavaScript
1 line
3 KiB
JavaScript
(()=>{typeof window.inputOTPState>"u"&&(window.inputOTPState=new WeakMap);(function(){if(window.inputOTPSystemInitialized)return;function p(i){if(!i||i.hasAttribute("data-initialized"))return;i.setAttribute("data-initialized","true");let l=i.querySelector("[data-input-otp-value-target]"),n=Array.from(i.querySelectorAll("[data-input-otp-slot]")).sort((t,e)=>parseInt(t.dataset.inputIndex)-parseInt(e.dataset.inputIndex));if(!l||n.length===0)return;i.hasAttribute("autofocus")&&requestAnimationFrame(()=>{let t=n[0];t&&(t.focus(),t.select())});let s=()=>{l.value=n.map(t=>t.value).join("")},f=()=>n.findIndex(t=>!t.value),o=t=>{t>=0&&t<n.length&&(n[t].focus(),setTimeout(()=>n[t].select(),0))},v=t=>{let e=t.target,a=parseInt(e.dataset.inputIndex);if(e.value===" "){e.value="";return}e.value.length>1&&(e.value=e.value.slice(-1)),e.value&&a<n.length-1&&o(a+1),s()},I=t=>{let e=t.target,a=parseInt(e.dataset.inputIndex);if(t.key==="Backspace"){let u=e.value;a>0&&(t.preventDefault(),u?(e.value="",s(),o(a-1)):(n[a-1].value="",s(),o(a-1)))}else t.key==="ArrowLeft"&&a>0?(t.preventDefault(),o(a-1)):t.key==="ArrowRight"&&a<n.length-1&&(t.preventDefault(),o(a+1))},h=t=>{let e=t.target,a=parseInt(e.dataset.inputIndex),u=f();if(u!==-1&&a!==u){o(u);return}setTimeout(()=>e.select(),0)},w=t=>{t.preventDefault();let a=(t.clipboardData||window.clipboardData).getData("text").replace(/\s/g,"").split(""),u=0,g=n.find(r=>r===document.activeElement);g&&(u=parseInt(g.dataset.inputIndex));for(let r=0;r<a.length&&u<n.length;r++)n[u].value=a[r],u++;s();let d=f();d===-1?d=n.length-1:d>0&&d>u&&(d=u),o(Math.min(d,n.length-1))};for(let t of n)t.addEventListener("input",v),t.addEventListener("keydown",I),t.addEventListener("focus",h);i.addEventListener("paste",w);let m=l.id;if(m){for(let t of document.querySelectorAll(`label[for="${m}"]`))if(!t.dataset.inputOtpListener){let e=a=>{a.preventDefault(),n.length>0&&o(0)};t.addEventListener("click",e),t.dataset.inputOtpListener="true",t._inputOtpClickListener=e}}if(i.dataset.value){let t=i.dataset.value;for(let e=0;e<n.length&&e<t.length;e++)n[e].value=t[e];s()}let y={slots:n,hiddenInput:l,handleInput:v,handleKeydown:I,handleFocus:h,handlePaste:w};window.inputOTPState.set(i,y)}function L(i){let l=window.inputOTPState.get(i);if(!l)return;for(let s of l.slots)s.removeEventListener("input",l.handleInput),s.removeEventListener("keydown",l.handleKeydown),s.removeEventListener("focus",l.handleFocus);i.removeEventListener("paste",l.handlePaste);let n=l.hiddenInput.id;if(n)for(let s of document.querySelectorAll(`label[for="${n}"]`))s._inputOtpClickListener&&(s.removeEventListener("click",s._inputOtpClickListener),delete s._inputOtpClickListener,delete s.dataset.inputOtpListener);window.inputOTPState.delete(i)}function c(i=document){i instanceof Element&&i.matches("[data-input-otp]")&&p(i),i.querySelectorAll("[data-input-otp]:not([data-initialized])").forEach(p)}window.templUI=window.templUI||{},window.templUI.inputOTP={init:c,cleanup:L},document.addEventListener("DOMContentLoaded",()=>c()),window.inputOTPSystemInitialized=!0})();})();
|