输入框输入验证码 浅浅的花香味﹌ 2021-11-29 15:54 425阅读 0赞 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNzA3NTU1_size_16_color_FFFFFF_t_70] html <div class="inputYZM"> <input type="tel" class="inputPhone" maxlength="1" name="code" pattern="[0-9]*" onkeyup="value=value.replace(/[^\d]/g,'')"> <input type="tel" class="inputPhone" maxlength="1" name="code" pattern="[0-9]*" onkeyup="value=value.replace(/[^\d]/g,'')"> <input type="tel" class="inputPhone" maxlength="1" name="code" pattern="[0-9]*" onkeyup="value=value.replace(/[^\d]/g,'')"> <input type="tel" class="inputPhone" maxlength="1" name="code" pattern="[0-9]*" onkeyup="value=value.replace(/[^\d]/g,'')"> </div> css .inputYZM input { display: inline-block; width: 0.8rem; height: 0.96rem; border: 3px solid #EEEEEE; margin-right: 0.45rem; text-align: center; font-size: 0.48rem; } .inputYZM input:last-child { margin-right: 0; } js // //键盘输入事件 $('.inputYZM input').keyup(function (event) { // 删除往前 添加往后 if ($(this).index() < 4) { if (event.keyCode == 46 || event.keyCode == 8) { $(this).prev('input').focus(); } else { $(this).next('input').focus(); } } }); let active = 0; let inputBtn = document.querySelectorAll('.inputPhone'); for (let i = 0; i < inputBtn.length; i++) { inputBtn[i].addEventListener('click', function () { inputBtn[active].focus(); }, false); inputBtn[i].addEventListener('focus', function () { this.addEventListener('keyup', listenKeyUp, false); }, false); inputBtn[i].addEventListener('blur', function () { this.removeEventListener('keyup', listenKeyUp, false); }, false); } function listenKeyUp() { let oneInput = $(".inputYZM input:first-child").val(); //第一个 let towInput = $(".inputYZM input:nth-child(2)").val(); //第二个 let threeInput = $(".inputYZM input:nth-child(3)").val(); //第三个 let fourInput = $(".inputYZM input:nth-child(4)").val(); //第四个 //拼成完整的验证码 let fullInput = oneInput.toString() + towInput.toString() + threeInput.toString() + fourInput.toString(); } [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNzA3NTU1_size_16_color_FFFFFF_t_70]: /images/20211129/9eba94b19db64272bbaeca7364b0baca.png
还没有评论,来说两句吧...