数字验证码多个输入框实现一个输入框效果
html核心代码如下:
请输入短信中的6位验证码
<%----%>重新发送
对应的css如下:
.iptCodeTip{color: #000;font-size: 14px;line-height: 40px;text-align: center} .checkedCode{padding: 0 48px;overflow: hidden} .checkedCode a{float: right;font-size: 13px;color: #000000;text-decoration: underline;line-height: 13px} .checkedCode input{padding: 0;margin:10px 0;width:12%;margin-right: 5.6%;text-align: center;display: block;float: left;height: 35px;border: solid 1px #898989;border-radius: 0;} .checkedCode input:last-child{margin-right: 0}
核心js如下:
$('.getCodeMsg input').keyup(function (event) { // 删除往前 添加往后 if($(this).index()<6) { if(event.keyCode==46 || event.keyCode==8) { $(this).prev('input').focus(); }else { $(this).next('input').focus(); } } })
显示效果图如下: