首先说明一下，最近项目中有个需求是将ip和mac写成如下图的形式：
我在网上查了一下，大概意思是这样的：
然后，我就开始写代码样式了，先模仿出需要的样式后，就是向后台传值的问题了，原来一个input不管是在显示和传值上都很方便，但是换成ip四个输入框，mac六个输入框之后就很麻烦了，然后我就在每一个div前面写了一个隐藏的文本框，用于将页面上显示的ip和Mac获取到之后放到隐藏的文本框中传递到后台去。就这样功能算是写好了，但是。。。。。。。。操作上还是有很多的不便，所以我在操作上也做了一些优化，主要有以下几点：
1.按键盘上，下，左，右键输入框可以左右切换
2.ip里面只能输入数字，如果输入非数字，会把非数字那个字段删除掉
3.ip的第一个小格数字要介于1-233之间，其他三格介于0-255之间，如果输入不在这个范围，就清空当前小格
4.ip只有在当前小格有输入，且输入为数字的时候按键盘点(.)会跳到下一格，要是当前格是空的，按点(.)不会有任何反应----mac同理，只是按冒号(:)而已
5.当ip输入3个，mac输入两个的时候会自动跳到下一个小格
6.当点击键盘Backspace删除时，如果当前框删除完了，会自动跳到前一个框进行删除
7.mac里面只能输入字母和数字，其他功能与ip类似
关于后台取值以及ip和mac回显，我后面做了一个函数的封装，其中隐藏文本里每一个ip或mac地址对应一个隐藏的文本框，将拼接好的ip或mac放到隐藏文本框中传给后台：HTML中将ip地址写成输入，点的形式，将mac地址写成输入，冒号的形式，并进行前后端的数据交互，以及实现一些快捷的操作及输入的限制。(代码封装)_笑到世界都狼狈的博客-CSDN博客
最后上代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#macValDe{width:233px;height: 30px;line-height:24px;border: 1px solid #ccc;border-radius: 5px;display:inline-block;}
#macValDe>input{height: 21px;width:26.3px; border: none; outline: none; padding-left: 5px;position: relative;top: 2px;text-align: center; }
#ipValDe{width: 179px;height: 30px;line-height:22px;border: 1px solid #ccc;border-radius: 5px;display:inline-block;margin-top: 20px;}
#ipValDe>input{height: 21px; width:32.3px; border: none; outline: none; padding-left: 5px;position: relative;top: 2px;text-align: center; }
</style>
<script type="text/javascript" src="lib/jquery.js"></script>
</head>
<body>
<div>
<!-- id="mac"用户将页面上显示的mac值传给后台 -->
<input type="hidden" name="mac" id="mac" class="required mac" value="">
<!-- 将Mac输入框修改成带冒号的格式 -->
mac地址：<div id="macValDe">
<input type="text" value="" class="mac1" maxlength="2">:<input type="text" value="" class="mac2" maxlength="2">:<input type="text" value="" class="mac3" maxlength="2">:<input type="text" value="" class="mac4" maxlength="2">:<input type="text" value="" class="mac5" maxlength="2">:<input type="text" value="" class="mac6" maxlength="2">
</div>
</div>
<div>
<!-- id="ip"用户将页面上显示的ip值传给后台 -->
<input type="hidden" name="ip" id="ip" class="ip" value="">
<!-- 将ip输入框修改成带点的格式 -->
ip地址：<div id="ipValDe">
<input type="text" value="" class="ip1" maxlength="3">.<input type="text" value="" class="ip2" maxlength="3">.<input type="text" value="" class="ip3" maxlength="3">.<input type="text" value="" class="ip4" maxlength="3">
</div>
</div>
<script type="text/javascript">
/**
* 当ip和Mac有初始值时，将其拆开，显示在每一个文本框中
* */
// Mac
var macShow="b0:6e:bf:2e:98:4c";
var resultMac=macShow.split(":");
$("#macValDe>.mac1").val(resultMac[0]);
$("#macValDe>.mac2").val(resultMac[1]);
$("#macValDe>.mac3").val(resultMac[2]);
$("#macValDe>.mac4").val(resultMac[3]);
$("#macValDe>.mac5").val(resultMac[4]);
$("#macValDe>.mac6").val(resultMac[5]);
// ip
var ipShow="192.168.10.5";
var resultIp=ipShow.split(".");
$("#ipValDe>.ip1").val(resultIp[0]);
$("#ipValDe>.ip2").val(resultIp[1]);
$("#ipValDe>.ip3").val(resultIp[2]);
$("#ipValDe>.ip4").val(resultIp[3]);
/**
* mac发生变化时调用即可
* 将每一个小格中的值获取到传给后台
* 如果小格中没有值则传空值，有值则传value值，并在后面加上：封号，最后一个不用加
* */
function macc(){
var mac1,mac2,mac3,mac4,mac5,mac6;
if ($("#macValDe>.mac1").val() == ''){
mac1 = '';
} else {
mac1 = $("#macValDe>.mac1").val() + ':';
}
if ($("#macValDe>.mac2").val() == ''){
mac2 = '';
} else {
mac2 = $("#macValDe>.mac2").val() + ':';
}
if ($("#macValDe>.mac3").val() == ''){
mac3 = '';
} else{
mac3 = $("#macValDe>.mac3").val() + ':';
}
if ($("#macValDe>.mac4").val() == ''){
mac4 = '';
} else {
mac4 = $("#macValDe>.mac4").val() + ':';
}
if ($("#macValDe>.mac5").val() == ''){
mac5 = '';
} else {
mac5 = $("#macValDe>.mac5").val() + ':';
}
if ($("#macValDe>.mac6").val() == ''){
mac6 = '';
} else{
mac6 = $("#macValDe>.mac6").val();
}
var macc = mac1+ mac2 + mac3 + mac4 + mac5 + mac6;
$("#mac").val(macc);
}
/**
* ip发生变化时调用即可
* 同Mac一样
* */
function ipp(){
var ip1,ip2,ip3,ip4;
if ($("#ipValDe>.ip1").val() == ''){
ip1 = '';
} else {
ip1 = $("#ipValDe>.ip1").val() + '.';
}
if ($("#ipValDe>.ip2").val() == ''){
ip2 = '';
} else {
ip2 = $("#ipValDe>.ip2").val() + '.';
}
if ($("#ipValDe>.ip3").val() == ''){
ip3 = '';
} else {
ip3 = $("#ipValDe>.ip3").val() + '.';
}
if ($("#ipValDe>.ip4").val() == ''){
ip4 = '';
} else {
ip4 = $("#ipValDe>.ip4").val();
}
var ipp = ip1 + ip2 + ip3 + ip4;
$("#ip").val(ipp);
}
/**
* mac地址格式
* 键盘按方向键上下左右，光标在四个input中来回切换
*/
$('#macValDe>input').each(function(i,o){
$(this).attr('cust_index', i);
})
$('#macValDe>input').keydown(function(event){
var keycode = event.which;
//从最后一个小格开始删除，删完之后直接跳到前一个小格中继续删除
if (event.keyCode == 8 && $(this).val().length == 0){
$(this).prev().focus();
}
if(38 != keycode && 40 != keycode && 37 != keycode && 39 != keycode){
return;
}
var ti = $(this).attr('cust_index');
if(39 == keycode || 40 == keycode) {
//down
ti++;
}else{
//up
ti--;
}
if(ti < 0){
ti = 0;
}
var next_obj = $('#macValDe>input[cust_index='+ti+']');
if(next_obj){
next_obj.focus();
}
})
/**
* 限制mac输入，以及跳下一格的条件
* */
$('#macValDe>input').bind('input propertychange',function () {
//限制mac只能输入数字母
var c=$(this);
//截取输入的最后一个字符
var lastStr=c.val().substr(c.val().trim().length-1,1);
if(/[^\w]/.test(c.val())) {
//替换非字母和数字字符，当输入不是字母或数字的时候用空替换
var temp_amount = c.val().replace(/[^\w]/g, '');
$(this).val(temp_amount);
// 当前小格输入的最后一个字符是.并且长度不等于空
if(/[:]/.test(lastStr) && $(this).val() != ''){
$(this).next().focus();
}
}
//当前小格输入长度为2时自动跳到下一格
if ($(this).val().trim().length == 2){
$(this).next().focus();
}
})
/**
* 限制ip输入，以及跳下一格的条件
* */
$('#ipValDe>input').bind('input propertychange',function () {
// 输入不是数字的时候清空
var c=$(this);
//截取输入的最后一个字符
var lastStr=c.val().substr(c.val().trim().length-1,1);
if(/[^\d]/.test(c.val())) {
//替换非数字字符
var temp_amount = c.val().replace(/[^\d]/g, '');
$(this).val(temp_amount);
// 当前小格输入的最后一个字符是.并且长度不等于空
if(/[.]/.test(lastStr) && $(this).val() != ''){
$(this).next().focus();
}
}
// 第二，三，四位输入不在0-255之间的时候清空
if ($(this).val() < 0 || $(this).val() > 255){
$(this).val('');
}
//第一位输入不在1-223之间的时候清空
if ($("#ipValDe>.ip1").val() < 1 || $("#ipValDe>.ip1").val() >223){
$("#ipValDe>.ip1").val('');
}
//当每一小格输入的长度等于3时，自动跳到下一个
if ($(this).val().trim().length == 3){
$(this).next().focus();
}
})
/**
* ip地址格式
* 键盘按方向键上下左右，光标在四个input中来回切换
*/
$('#ipValDe>input').each(function(i,o){
$(this).attr('cust_index', i);
})
$('#ipValDe>input').keydown(function(event){
var keycode = event.which;
//从最后一个小格开始删除，删完之后直接跳到前一个小格中继续删除
if (event.keyCode == 8 && $(this).val().length == 0){
$(this).prev().focus();
}
if(38 != keycode && 40 != keycode && 37 != keycode && 39 != keycode){
return;
}
var ti = $(this).attr('cust_index');
if(39 == keycode || 40 == keycode) {
//down
ti++;
}else{
//up
ti--;
}
if(ti < 0){
ti = 0;
}
var next_obj = $('#ipValDe>input[cust_index='+ti+']');
if(next_obj){
next_obj.focus();
}
})
</script>
</body>
</html>这段代码写了时隔好几年后，竟然被测试测出来bug，原因是这样的当输入法是中文时，在MAC地址栏输入，会连切两小格子。
对此在切换到下一小格时做了一点限制，具体代码如下：
/**
* 限制mac输入，以及跳下一格的条件
* 存在bug,输入中文的时候会连跳好几个，通过判断compositionstart、compositionend、keyCode进行了限制
* */
var isChinese = 0
$('.macVal>input').bind('input propertychange',function () {
//限制mac只能输入数字母
var c=$(this);
//截取输入的最后一个字符
var lastStr=c.val().substr(c.val().trim().length-1,1);
if(/[^\w]/.test(c.val())) {
//替换非数字字符
var temp_amount = c.val().replace(/[^\w]/g, '');
$(this).val(temp_amount);
// 当前小格输入的最后一个字符是.并且长度不等于空
if(/[:]/.test(lastStr) && $(this).val() != ''){
$(this).next().focus();
}
}
//当前小格输入长度为2且输入法不是中文时跳到下一格
// console.log('isChinese111', isChinese)
if (($(this).val().trim().length == 2) && isChinese == 0){
$(this).next().focus();
}
}).on('compositionstart', function (e) {
isChinese = 1;
// console.log('中文输入：开始', isChinese);
}).on('compositionend', function (e) {
isChinese = 0
// console.log('中文输入：结束', isChinese);
}).keydown(function(event){
// console.log('event.keyCode', event.keyCode)
if(event.keyCode==32 || event.keyCode==16 || event.keyCode==17){
isChinese = 0
// console.log('键盘', isChinese)
}
});
435
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
