h5实现仿支付宝验证码的样式

实现思路：用六个文本框来实现6个分隔的输入框，使用js来控制文本框的最大长度为1，并且只能输入数字，禁止粘贴。

 <div class="inputItem">
        	<input type="tel" maxlength="1" onpaste="return false;"/>
        	<input type="tel" maxlength="1" onpaste="return false;"/>
        	<input type="tel" maxlength="1" onpaste="return false;"/>
        	<input type="tel" maxlength="1" onpaste="return false;"/>
        	<input type="tel" maxlength="1" onpaste="return false;"/>
        	<input type="tel" maxlength="1" onpaste="return false;"/>
        	<span class="getCode">获取验证码</span>
        </div>

        var active = 0,
        inputBtn = document.querySelectorAll('input'),
        isFirst = false;//判断最后一个文本框的删除键
	    for (var i = 0; i < inputBtn.length; i++) {
	        inputBtn[i].addEventListener('click', function () {
	            inputBtn[active].focus();
	        }, false);
	        inputBtn[i].addEventListener('keyup', listenKeyUp, false);
	    }
       // 监听键盘的敲击事件
	    function listenKeyUp(e) {
	    	//如果是空格键，不让前进到下个文本框
	    	if(e.keyCode == 32){
	        	inputBtn[active].value = '';
	        	return false;
	        }
	    	if(active == 5 && isRequest == false){
	    		var isFull = true;
	    		//判断是否每个文本框都有值
	    		for(var i = 0;i < 6;i++){
	    			if(inputBtn[i].value.length == 0){
	    				isFull = false;
	    				break;
	    			}
	    		}
	    		if(isFull){
	    			$('.receive-btn').removeClass('no');
	    			$('.receive-btn').addClass('nor');
	    		}
	    	}
	        if (!isNaN(this.value) && this.value.length != 0) {
	            if (active < 5) {
	                active += 1;
	            }
	            //解决最后一个输入框的删除问题
	            if (active == 5){
	    			if(isFirst){
		    				isFirst = false;
		    			}
		    			else{
						 	isFirst = true;
		    			}
	    		}
	            inputBtn[active].focus();
	        } 
	        //判断删除键
	        else if (this.value.length == 0 || e.keyCode == 8) {
		        	$('.receive-btn').removeClass('nor');
		    		$('.receive-btn').addClass('no');
		    		//解决最后一个输入框的删除问题
		    		if (active == 5){
		    			if(isFirst){
		    				isFirst = false;
		    			}
		    			else{
						 	isFirst = true;
		    			}
		    		}
		            if (active > 0 && isFirst == false) {
		                active -= 1;
		            }
		            inputBtn[active].value = '';
		            inputBtn[active].focus();
		          
	        }
	        //非数字的话置空
	    	if(isNaN(this.value)){
	    		inputBtn[active].value = this.value.replace(/[^\d]/g,'');
	    		$('.receive-btn').removeClass('nor');
	    		$('.receive-btn').addClass('no');
	    	}
        }

以上代码基本实现了仿支付宝验证码的输入和删除，但是在安卓4的版本中监听不到删除键，导致删除不了。需要兼容安卓4的话，就不能采用6个分隔开的文本框，改用一个文本框来实现，这样兼容性最好。