最近接的新项目，登录注册页根据需求要使用手机号获取验证码登录或者注册，一开始的想法是要做4个inputshur输入框，但是光标问题太严重。
在网上看别人的实现方法，发现可以用一个input+4个span或者四个div来做，经过构思，实现了以下的方法。
html:
<div id="shoujihao">
<span></span>
<button class="daojishibtn" type="button">点击获取</button>
<!--验证码输入框-->
<div class="container" id="test">
<div class="val-box" id="val-box">
<input id="val-code-input" type="text" maxlength="4" οnkeyup="checkForNum(this)" onselectstart="return false;" οnblur="checkForNum(this)" />
<div name="val-item"></div>
<div name="val-item"></div>
<div name="val-item"></div>
<div name="val-item"></div>
</div>
</div>
</div>
css:
.container {
position: absolute;
bottom: 30px;
padding: 10px;
text-align: center;
}
.container p{
font-family: "微软雅黑";
color: #888;
}
.val-box {
display: inline-block;
height: 40px;
width: 216px;
text-align: center;
position: relative;
background: #FFFFFF;
-webkit-tap-highlight-color: transparent;
}
.val-box input[type=text] {
position: absolute;
left: 0;
top: 0;
height: 34px;
width: 212px;
opacity: 0.9;
z-index: -999;
outline: none;
margin-left: 1000px;
-webkit-tap-highlight-color: transparent;
}
.val-box div {
height: 38px;
width: 22%;
border: 1px solid #DDD;
border-radius: 5px;
float: left;
margin: 2px 3px;
z-index: 5;
font-size: 1.5em;
font-family: arial;
/*font-weight: 530;*/
text-align: center;
line-height: 1.5em;
cursor: text;
/*padding-bottom: 10px;*/
}
.val-box .available {
border-color: #0081db;
}
/*.val-box .availabla:after {
/*伪类实现光标效果*/
content: ' ';
display: inline-block;
height: 90%;
width: 1px;
background: #313131;
animation: .8s animate infinite;
}*/
js:
// 四格验证码
$(function(){
var valCodeInput = $("#val-code-input");
var valCodeItems = $("div[name='val-item']");
var regex = /^[\d]+$/;
var valCodeLength = 0;
$('#val-box').on('click',function(){
valCodeInput.focus();
})
// input输入框即时反映
valCodeInput.on('input propertychange change', function(e){
valCodeLength = valCodeInput.val().length;
if(valCodeInput.val() && regex.test(valCodeInput.val())) {
$(valCodeItems[valCodeLength - 1]).removeClass('available');
$(valCodeItems[valCodeLength - 1]).addClass('available');
$(valCodeItems[valCodeLength - 1]).text(valCodeInput.val().substring(valCodeLength - 1, valCodeLength));
}
})
// 点击获取验证码或点击第一个数字输入框时获取焦点,添加available类样式
$(".daojishibtn,div[name='val-item']").on("tap",function(){
$(valCodeInput).focus();
$(valCodeItems[0]).addClass('available');
})
// 删除键
$(this).on('keyup', function(e){
if(e.keyCode === 8) {
$(valCodeItems[valCodeLength]).text("");
if(valCodeLength !== 0){
$(valCodeItems[valCodeLength]).removeClass('available');
}
}
});
// 当验证码输入四位时直接跳转（在此验证验证码是否正确）
$(valCodeInput).on("input propertychange",function(){
if (valCodeInput.val().length == 4) {
$("#yanzhengma").fadeOut(200,function(){
//资料弹窗弹出
$("#dialog1").fadeIn(200);
})
}
})
})
// 把所有输入的不是数字的字符转换为空值
function checkForNum(obj) {
obj.value = obj.value.replace(/[\D]/g, '');
}
