<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>jQuery分隔输入验证码特效 - 更多源码WW.96flw.COM</title>
<style type="text/css">
h2{
text-align: center;
}
.code{
border:none;
width:25px;
border-bottom: 1px solid black;
outline:none;
background-color:transparent;
height:32px;
color:black;
margin: 0 5px;
text-align: center;
}
input::-webkit-inner-spin-button {
-webkit-appearance: none !important;
margin: 0;
}
.btn{
display: block;
margin:30px auto;
}
</style>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$(".code").on("input",function(){
var value=$(this).val();
if(value.length==4){
$(".code").eq(0).val(value.slice(0,1));
$(".code").eq(1).val(value.slice(1,2));
$(".code").eq(2).val(value.slice(2,3));
$(".code").eq(3).val(value.slice(3));
/*$(".code").eq(3).focus(); //如果需要保留焦点，请把这条代码留上*/
}else if(value.length>=1){
$(this).val(value.slice(0,1));
$(this).blur();
$(this).next().focus();
}
});
$(document).keyup(function(event){
if(event.keyCode==8){ //监视删除按钮，手机和电脑上的keyCode都是8
var item=$("input:focus");
if(item.length){
$(item).prev().focus();
}
}
});
$(".btn").on("click",function(){
var result="";
$.each($(".code"), function(i) {
var value=$(this).val();
result+=value;
});
alert("验证码："+result);
});
});
</script>
</head>
<body>
<h2>输入验证码</h2>
<div style="width: 175px;margin: 80px auto;">
<input class="code" type="number">
<input class="code" type="number">
<input class="code" type="number">
<input class="code" type="number">
<button type="button" class="btn">提交</button>
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：Chrome、FireFox、360、搜狗、Opera、傲游. 不支持Windows版Safari、IE8及以下浏览器。</p>
<p>更多源码：<a href="http://WW.96flw.COM/" target="_blank">尽在WW.96flw.COM</a></p>
</div>
</body>
</html>
