效果如下图所示,
代码如下,
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('');
};
})
})