注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

扶红星的博客

生活本无味,尝试的多了也便五味俱全了。

 
 
 

日志

 
 

table里实现光标自动换行  

2016-08-16 14:15:06|  分类: 知识梳理 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
工作中有时会有扫码枪的出现,最终使得一条条条形码变成一串串字符串,为了使得这些字符串都能完整的对应到相应的控件中去,并想执行相应的数据处理操作,就可以借助程序了,这里将以简单的web形式作为例子作以展示,具体实现过程如下:

<html>
<head>
<title>Example</title>
<meta charset="utf-8">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css"/>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<style type="text/css">
.s{
margin-bottom: 50px;
margin-left: 30px;
}
.toggle-auto {
margin-bottom: 5px;
width:80px;
}
.code-input {
text-align:center;
width:210px;
}
.table{
width:400px;
}
</style>
</head>
<body>
<form name="b1">
<select class="s">
<option value="10" class="0">10</option>
<option value="11" class="0">11</option>
<option value="12" class="0">12</option>
</select>//设置一个下拉框,分别假设10,11,12三个字符串长度,每次选择一个字符串长度的时候,在相应的文本框里只有达到所选择的的字符串长度时,光标才能够实现跳转到下一行的目的。

<table class="table">
<tbody>
<tr><td><a class="toggle-auto btn btn-primary btn-xs">设为手动</a><input type="" name="t1" onfocus=this.select() class="code-input form-control"></td><td><select class="c"><option value="0"> </option><option value="1">√</option><option value="2">×</option><option value="3"">\</option></select></td><td><select class="c"><option value="0"> </option><option value="1">√</option><option value="2">×</option><option value="3"">\</option></select></td></tr>
<tr><td><a class="toggle-auto btn btn-primary btn-xs">设为手动</a><input type="" name="" class="code-input form-control"></td><td><select class="c"><option value="0"> </option><option value="1">√</option><option value="2">×</option><option value="3"">\</option></select></td><td><select class="c"><option value="0"> </option><option value="1">√</option><option value="2">×</option><option value="3"">\</option></select></td></tr>
<tr><td><a class="toggle-auto btn btn-primary btn-xs">设为手动</a><input type="" name="" class="code-input form-control"></td><td><select class="c"><option value="0"> </option><option value="1">√</option><option value="2">×</option><option value="3"">\</option></select></td><td><select class="c"><option value="0"> </option><option value="1">√</option><option value="2">×</option><option value="3"">\</option></select></td></tr>
<tr><td><a class="toggle-auto btn btn-primary btn-xs">设为手动</a><input type="" name="" class="code-input form-control"></td><td><select class="c"><option value="0"> </option><option value="1">√</option><option value="2">×</option><option value="3"">\</option></select></td><td><select class="c"><option value="0"> </option><option value="1">√</option><option value="2">×</option><option value="3"">\</option></select></td></tr>
<tr><td><a class="toggle-auto btn btn-primary btn-xs">设为手动</a><input type="" name="" class="code-input form-control"></td><td><select class="c"><option value="0"> </option><option value="1">√</option><option value="2">×</option><option value="3"">\</option></select></td><td><select class="c"><option value="0"> </option><option value="1">√</option><option value="2">×</option><option value="3"">\</option></select></td></tr>
</tbody>
</table>//设置一个表格,每一行设一个“设为手动”链接,当点击此链接的时候,光标停留在该行,此时可以手动的去修改相对应文本框的内容,而且只对本行文本框操作有效;每一行设置一个文本框,用来承载相对应的字符串,当字符串达到预选长度时,光标将自动转移到下一行文本框,循环往复;每行设置两个下拉框,当该行文本框中的字符串长度达到预选长度时,使得该行对应下拉框发生改变。
<script type="text/javascript">
(function() {
document.b1.t1.focus();
var autoJumpToNextLine = true;
var codeLength = $('.s').val();
$('.s').on('change',function(){
var $this = $(this);
codeLength = $this.val();
$('input.code-input').val("");//当下拉框数值发生改变时将表格中的文本框赋值为空
$('select.c').val(0);//使得文本框后面 的下拉框选择第一个值
document.b1.t1.focus();//并将光标移动到表格第一行中的文本框中

});
$('.toggle-auto').on('click', function(e) {
autoJumpToNextLine = !autoJumpToNextLine;
$(this).siblings('.code-input').one('blur', function(e) {
autoJumpToNextLine = true;
});
});
$('.code-input').on('input', function(e) {
var $this = $(this);
var $val = $this.val().split(" ").join(""); //去除文本框中字符串里存在的空格
if(parseInt(codeLength,10)===$val.length)//当获取的字符串长度与预选的字符串长度一致的时候
{
var $nextInput = $this.closest('tr').next('tr').find('input.code-input');
if (!$nextInput.length) {
$nextInput = $('.code-input').first();//当光标跳转到最后一行时,让光标回归到第一行,,可以继续实现下一轮的循环......
}
if ($nextInput && autoJumpToNextLine) {
$nextInput.focus().select();//光标转移到下一行,并且实现全选当前行的内容。
}
$this.closest('tr').find('select.c').val(1);//当光标每换一行的时候就让下拉框选择第二个值。
}
});
})();
</script>
</body>
</html>

最终实现的效果图如下:
web里实现光标自动换行 - 扶红星 - 扶红星的博客
  
  评论这张
 
阅读(43)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017