实现原理:
默认input第一个带光标,第一个输完自动跳转到第一个输入框,以此类推,
当删除某一个输入框中的值重新输入,输入完后自动跳转到下一个
代码实现:
<div class="container"> <h2>Verify Your Account</h2> <p>We emailed you the six digit code to cool_guy@email.com<br />Enter the code below to confirm your email address.</p> <div class="code-container"> <input type="number" class="code" placeholder="0" min="0" max="9" required> <input type="number" class="code" placeholder="0" min="0" max="9" required> <input type="number" class="code" placeholder="0" min="0" max="9" required> <input type="number" class="code" placeholder="0" min="0" max="9" required> <input type="number" class="code" placeholder="0" min="0" max="9" required> <input type="number" class="code" placeholder="0" min="0" max="9" required> </div> <small class="info">THis is design only. We didn‘t actually send you an email as we don‘t have your email, right?</small>
</div>
let codes = document.querySelectorAll(‘.code‘) codes[0].focus() codes.forEach((code,idx) => { code.addEventListener(‘keydown‘, (e) =>{ if(e.key >= 0 && e.key <=9) { codes[idx].value = ‘‘ setTimeout(() => codes[idx + 1].focus(), 10) }else if (e.key === ‘Backspace‘) { setTimeout(() => codes[idx - 1].focus(), 10) } }) })
@import url(‘https://fonts.googleapis.com/css?family=Muli:300,700&display=swap‘); *{ box-sizing: border-box; } body{ background: #fbfcfe; font-family: "Muli", sans-serif; display: flex; align-items: center; justify-content: center; height: 100vh; overflow: hidden; margin: 0; } .container{ padding: 30px; background: #fff; border: 3px solid #000; border-radius: 10px; max-width: 1000px; text-align: center; } .code-container{ display: flex; align-items: center; justify-content: center; margin: 40px 0; } .code{ border-radius: 5px; font-size: 75px; height: 120px; width: 100px; border: 1px solid #eee; margin: 1%; text-align: center; font-weight: 300; -moz-appearance: textfield; } .code::-webkit-outer-spin-button, .code::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; } .code:valid{ border: #3498bd; box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.25); } .info{ background: #eaeaea; display: inline-block; padding: 10px; line-height: 20px; max-width: 400px; color: #777; border-radius: 5px; } @media(max-width:600px){ .code-container{ flex-wrap: wrap; } .code{ font-size: 60px; height: 80px; max-width: 70px; } }
效果实现: