标签：style blog http java color strong
前两天和同事讨论公司系统一个身份证录入文本框，发现还有一个要录入年龄的文本框，都感觉挺麻烦的。其实当录入身份证号后，年龄就是固定的，想到这就动手写jQuery来改进系统，提高用户体验。
首先，身份证从第七位开始时年龄段，如：410223199910210000，这样，就获取身份证的从第七位开始和接下来的八位。在获取当前时间，相减获取年龄。这样 做还是不是准确的，还要考虑月份和具体每天。代码如下：
1 var nowDate = new Date(); 2 var month = nowDate.getMonth() + 1; 3 var day = nowDate.getDate(); 4 var age = nowDate.getFullYear() - userCard.substring(6, 10) - 1; 5 if (userCard.substring(10, 12) < month || userCard.substring(10, 12) == month && userCard.substring(12, 14) <= day){ 6 age++; 7 }
考虑到如果用户输入身份证号后，年龄计算出来就不让用户再填写（容易填错），还要将年龄文本框undisabled.
接下来考虑什么时候计算，这里在身份证号失去焦点时，进行年龄的计算。
另外，另一个提高用户体验的地方是，当用户想输入年龄时，只让输入数字，不让输入其他的字符。实现这个功能，代码如下：
1 $("#age").keypress(function (event) { 2 var keyCode = event.which; 3 if (keyCode >= 48 && keyCode <= 57) { 4 return true; 5 } 6 else { 7 return false; 8 } 9 }).focus(function () { 10 this.style.imeMode = ‘disabled‘; 11 });
当所有完成后，页面的全部代码就如下：
1 <head runat="server"> 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 3 <title>项目积累</title> 4 <style type="text/css"> 5 span{ 6 width:111px; 7 background-color:#f2f0f0; 8 display:block; 9 } 10 </style> 11 <script src="Scripts/jquery-1.7.1.js"></script> 12 <script type="text/javascript"> 13 $(function () { 14 // 身份证号文本框失去焦点 15 $("#idCard").blur(function () { 16 // 获取身份证号 17 var userCard = $("#idCard").val(); 18 if (userCard == "") { 19 // 输入为空，返回不计算 20 return; 21 } 22 //获取年龄 23 var nowDate = new Date(); 24 var month = nowDate.getMonth() + 1; 25 var day = nowDate.getDate(); 26 var age = nowDate.getFullYear() - userCard.substring(6, 10); 27 if (userCard.substring(10, 12) < month || userCard.substring(10, 12) == month && userCard.substring(12, 14) <= day){ 28 // 按我们平时所谓的"虚岁"计算 29 age++; 30 } 31 $("#age").val(age); 32 $("#age").attr(‘readonly‘, true); 33 }); 34 // 值输入数字 35 $("#age").keypress(function (event) { 36 var keyCode = event.which; 37 if (keyCode >= 48 && keyCode <= 57) { 38 return true; 39 } 40 else { 41 return false; 42 } 43 }).focus(function () { 44 // return false,输入法关闭 45 this.style.imeMode = ‘disabled‘; 46 }); 47 }) 48 //获取输入身份证号码 49 var UUserCard = $("#UUserCard").val(); 50 //获取出生日期 51 //UUserCard.substring(6, 10) + "-" + UUserCard.substring(10, 12) + "-" + UUserCard.substring(12, 14); 52 //获取性别 53 if (parseInt(UUserCard.substr(16, 1)) % 2 == 1) { 54 //男 55 } else { 56 //女 57 } 58 //获取年龄 59 var myDate = new Date(); 60 var month = myDate.getMonth() + 1; 61 var day = myDate.getDate(); 62 var age = myDate.getFullYear() - UUserCard.substring(6, 10) - 1; 63 if (UUserCard.substring(10, 12) < month || UUserCard.substring(10, 12) == month && UUserCard.substring(12, 14) <= day) { 64 age++; 65 } 66 //年龄 age 67 </script> 68 </head> 69 <body> 70 <form id="form" runat="server"> 71 <div> 72 <span>姓 名</span> 73 <input id="name" type="text"/> 74 </div> 75 <div> 76 <span>身份证号码</span> 77 <input id="idCard" type="text"/> 78 </div> 79 <div> 80 <span>年龄</span> 81 <input id="age" type="text"/> 82 </div> 83 </form> 84 </body>
项目积累(二)细节问题，提高用户体验,布布扣,bubuko.com
标签：style blog http java color strong
原文地址：http://www.cnblogs.com/muyixiaoguang/p/3855622.html
