移动端验证码效果的实现

效果如下图所示，

代码如下，

html代码：

<div class="numberBox clearfix" onclick="judgeval();"><input type="tel" id="userinfo" index='0' maxlength="1" onfocus="focusinput(this);" />  <input type="tel" id="userinfo2" index='1' maxlength="1" onfocus="focusinput(this);"/> <input type="tel" id="userinfo3" index='2' maxlength="1" onfocus="focusinput(this);"/> <input type="tel" id="userinfo4" index='3' maxlength="1" onfocus="focusinput(this);" class="box"/></div>

js代码如下：

/*index是input位置参数，等于当前有焦点的input的index属性morebackspace是检测是否连续删除的参数，点击一次删除后，值为true，其他操作时为falseinputval是检测当前具有焦点的input值是否为空的参数，如果为空，则为false，否则为true*/var higoodthingsdata = {index: 0,morebackspace: false,inputval: false}//验证4个input是否为空，如果为空，第一个input获得焦点function judgeval() {var arr = [];$('.numberBox input').each(function(index){if($(this).val() != '') {arr.push($(this).val())}});if(arr.length == 0) {$('#userinfo').focus();}}//光标移向下一个inputfunction nextinput(index) {index++;$('[index=' + index + ']').focus();higoodthingsdata.index = index;}//光标移向前一个input，并且对其进行删除操作function preinput(index) {index--;$('[index=' + index + ']').focus();$('[index=' + index + ']').val('');higoodthingsdata.index = index;}// input的焦点事件function focusinput(obj) {var _this = $(obj);_this.select();var val = _this.val();// 当input获得焦点时，更新higoodthingsdata.index为当前input的index属性var index = parseInt(_this.attr('index'));higoodthingsdata.index = index;/*获得焦点的当前input值为空时更新inputval为false，morebackspace为true不为空时，更新inputval为true，morebackspace为false*/if(val == '') {higoodthingsdata.inputval = false;higoodthingsdata.morebackspace =true;}else {higoodthingsdata.inputval = true;higoodthingsdata.morebackspace = false;}}$(function(){// 键盘事件$(this).keyup(function (even) {        var keycode = (event.keyCode ? event.keyCode : event.which);        // 检测键盘中是否按下删除键        if(keycode == 8) {        // 检测是否是连续按下删除键        if(higoodthingsdata.morebackspace) {        // 连续按下删除键的情况下，光标前移，并且删除前一项input值        preinput(higoodthingsdata.index);        }else {        // 不是连续按下删除键的情况下，先检测当前具有焦点的input元素是否有值        if(higoodthingsdata.inputval) {        // 有值的情况下，光标不前移，直接删除当前项，并更新inputval状态        $('[index=' + higoodthingsdata.index + ']').val('');        higoodthingsdata.inputval = false;        }else {        // 没有值的情况下，光标前移，删除前一项，并更行inputval状态        preinput(higoodthingsdata.index);        higoodthingsdata.inputval = false;        };        };        // 按下删除键后，更新morebackspace状态为true        higoodthingsdata.morebackspace = true;        // 每次按下删除键的时候都要实时监测四个input是否为空，如果为空，使第一个input具有光标        judgeval();        return;        };        // 使用keycode有特殊字符的bug，建议用正则匹配        if(((keycode >= 49) && (keycode <= 57)) || ((keycode >= 96) && (keycode <= 105))){        // 键盘事件，输入0-9，光标后移，并且更新morebackspace的值为false        nextinput(higoodthingsdata.index);        higoodthingsdata.morebackspace = false;        // 最后一个input的index修正        if(higoodthingsdata.index == 4) {        higoodthingsdata.inputval = true;        higoodthingsdata.index = 3;        }        }else {        // 键盘事件，输入不是0-9，光标不后移，清空当前输入值        $('[index=' + higoodthingsdata.index + ']').val('');        };    })})