Sześciocyfrowy kod z wklejaniem

<main class="otp"><div class="poster"><svg viewBox="0 0 100 100" aria-hidden="true"><path d="M20 42V28a30 30 0 0 1 60 0v14" fill="none" stroke="currentColor" stroke-width="8"/><rect x="8" y="38" width="84" height="59" fill="currentColor"/><circle cx="50" cy="63" r="7" fill="#b3eeed"/><path d="M50 63v16" stroke="#b3eeed" stroke-width="6"/></svg><h1>Wpisz<br>kod.</h1><p>Wklej cały kod lub wpisz cyfry pojedynczo.</p></div><form id="otp-form"><fieldset><legend>Kod testowy</legend><div class="digits"><input id="digit-0" aria-label="Cyfra 1" inputmode="numeric" maxlength="1" pattern="[0-9]" required autocomplete="off"><input id="digit-1" aria-label="Cyfra 2" inputmode="numeric" maxlength="1" pattern="[0-9]" required autocomplete="off"><input id="digit-2" aria-label="Cyfra 3" inputmode="numeric" maxlength="1" pattern="[0-9]" required autocomplete="off"><input id="digit-3" aria-label="Cyfra 4" inputmode="numeric" maxlength="1" pattern="[0-9]" required autocomplete="off"><input id="digit-4" aria-label="Cyfra 5" inputmode="numeric" maxlength="1" pattern="[0-9]" required autocomplete="off"><input id="digit-5" aria-label="Cyfra 6" inputmode="numeric" maxlength="1" pattern="[0-9]" required autocomplete="off"></div></fieldset><p class="note">Kod testowy: 123456.</p><div class="row"><button type="button" data-demo-submit>Sprawdź kod</button><button id="clear-code" type="button" class="secondary">Wyczyść</button></div><p id="status" class="status" role="status"></p></form></main>

*{box-sizing:border-box}body{margin:0;min-height:100vh;padding:24px;font:16px/1.45 system-ui,sans-serif;display:grid;align-content:center;color:#17212e;background:#f5f7fb}main{width:min(100%,850px);margin:auto}h1,h2,p{margin:0 0 16px}h1{font-size:clamp(26px,4vw,42px);line-height:1.1}h2{font-size:21px}label{display:block;font-weight:600;margin-bottom:6px}input,select,textarea,button{font:inherit;max-width:100%}input:not([type=radio]):not([type=checkbox]):not([type=range]):not([type=color]),select,textarea{width:100%;padding:10px 12px;background:#fff;color:#17212e;border:1px solid #748091;min-height:44px;border-radius:0}textarea{resize:vertical}button{min-height:44px;padding:10px 18px;border:1px solid currentColor;background:#17212e;color:white;cursor:pointer;border-radius:0}button:hover{filter:brightness(1.15)}button:disabled{cursor:default;opacity:.55}button.secondary{background:transparent;color:inherit}input[type=radio],input[type=checkbox]{width:20px;height:20px;vertical-align:middle;accent-color:var(--accent,#3155c7)}input[type=range]{width:100%;accent-color:var(--accent,#3155c7);min-height:32px}input[type=color]{width:100%;min-height:52px;cursor:pointer;background:transparent;border:1px solid currentColor}fieldset{border:0;padding:0;margin:0}legend{font-weight:600;margin-bottom:12px}output{display:block}small,.note{font-size:13px}p.note{margin:10px 0 0}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--accent,#3155c7);outline-offset:3px}[hidden]{display:none!important}.field{margin-bottom:16px}.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.status{min-height:24px;margin-top:14px;font-weight:600;overflow-wrap:anywhere}.muted{color:#4b5868}.two{display:grid;grid-template-columns:1fr 1fr;gap:20px}@media(max-width:560px){body{padding:18px}.two{grid-template-columns:1fr}h1{font-size:29px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}body{background:#b3eeed;--accent:#175f6c;color:#134b58}.otp{display:grid;grid-template-columns:1fr 1.3fr;gap:45px;align-items:center}.poster svg{width:65px;margin-bottom:16px}.poster h1{font-size:clamp(34px,4.5vw,51px)}.digits{display:flex;gap:7px}.digits input{padding:6px!important;min-width:0;text-align:center;font-size:26px;min-height:60px!important;background:#f1fffe!important;color:#134b58!important}.otp .row{margin-top:28px}.otp button{background:#175f6c}.otp button.secondary{background:transparent;color:#134b58}@media(max-width:560px){.otp{grid-template-columns:1fr;gap:24px}.poster svg{display:none}.poster h1{font-size:35px}.digits{gap:5px}.digits input{font-size:22px;min-height:52px!important}.otp button{padding:10px 13px}}

(()=>{const q=s=>document.querySelector(s);const all=s=>[...document.querySelectorAll(s)];const digits=all('.digits input');digits.forEach((input,i)=>{input.addEventListener('input',()=>{input.value=input.value.replace(/\D/g,'').slice(-1);q('#status').textContent='';if(input.value&&i<5)digits[i+1].focus()});input.addEventListener('keydown',e=>{if(e.key==='Backspace'&&!input.value&&i>0){e.preventDefault();digits[i-1].value='';digits[i-1].focus()}if(e.key==='ArrowLeft'&&i>0){e.preventDefault();digits[i-1].focus()}if(e.key==='ArrowRight'&&i<5){e.preventDefault();digits[i+1].focus()}});input.addEventListener('paste',e=>{const code=e.clipboardData.getData('text').replace(/\D/g,'').slice(0,6);if(!code)return;e.preventDefault();digits.forEach((d,j)=>d.value=code[j]||'');digits[Math.min(code.length,5)].focus();q('#status').textContent=''})});q('#otp-form').onsubmit=e=>{e.preventDefault();if(!q('#otp-form').reportValidity())return;q('#status').textContent=digits.map(d=>d.value).join('')==='123456'?'Kod poprawny. Demonstracja zakończona.':'Kod niepoprawny. W przykładzie użyj 123456.'};q('#clear-code').onclick=()=>{digits.forEach(d=>d.value='');q('#status').textContent='Kod wyczyszczony.';digits[0].focus()};all('form').forEach(form=>{const submit=form.querySelector('[data-demo-submit]');if(!submit)return;submit.addEventListener('click',()=>form.dispatchEvent(new Event('submit',{cancelable:true})));form.addEventListener('keydown',event=>{if(event.key==='Enter'&&!event.defaultPrevented&&event.target.matches('input:not([type=radio]):not([type=checkbox])')){event.preventDefault();submit.click();}})});})();