移动端验证码效果的实现

效果如下图所示，

代码如下，

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，其他操作时为false
	inputval是检测当前具有焦点的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();
	}
}
//光标移向下一个input
function 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('');
        };
    })
})