您好,游客注册登录繁體
首页 >> javascript >> js输入文本框自动跳转到下一个文本框并实现回删功能

js输入文本框自动跳转到下一个文本框并实现回删功能

Tyna 2015-06-17 0
浏览次数2221

 
js输入文本框自动跳转到下一个文本框并实现回删功能
 
这是最近在写的一个小功能,现在整理出来以便于小伙伴们交流学习。
 
这里可以添加无数的文本框,每个文本框限制输入一个文字,会自动跳转到下一个文本框。你也可以实现回删的功能,会自动逐个进行回删。
 
效果如图:
 
文本框输入自动跳转文字输入自动跳转
 
html部分:
 
<div id="body">
<input type="text" maxlength="1" class="input">
<input type="text" maxlength="1" class="input">
<input type="text" maxlength="1" class="input">
<input type="text" maxlength="1" class="input">
<input type="text" maxlength="1" class="input">
<input type="text" maxlength="1" class="input">
</div>

 
css部分:
 
<style type="text/css">
.input{
display: block;
width: 40px;
height: 35px;
float: left;
margin-left: 10px;
}
</style>

 
js部分:
 
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
 
<script>
$(function(){
var inputLength = $('input').length;
//$('input').keyup(function(){})
//使用jQuery事件代理的事件绑定方式,不需要对每个input进行事件绑定,有利于性能优化
$('#body').delegate('input','keyup',function(){
var _this = $(this),valLength = _this.val().length,index = _this.index();
if(valLength>0){
if((index+1) > inputLength) return false;//输入完成时进行操作
_this.attr('data-in','true').next().focus();
}else if(valLength == 0 && _this.attr('data-in') == 'true'){
if(index == 0) return false;//删除所有时进行操作
_this.attr('data-in','false').prev().focus();
}
});
});
</script>

 
当然,大家可以在这基础上根据需要,延伸增加文字输入类型的判断、输入多少文字的时候自动跳转、以及输入完成后的提交等~
 
以上大家自行发挥进行伸缩—tyna
 

全部评论:0

需要登录才能发表评论!

需要 登录 才能发表评论

<