项目积累(二)细节问题，提高用户体验
作者：互联网
原文链接：http://www.cnblogs.com/muyixiaoguang/p/3855622.html
前两天和同事讨论公司系统一个身份证录入文本框，发现还有一个要录入年龄的文本框，都感觉挺麻烦的。其实当录入身份证号后，年龄就是固定的，想到这就动手写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 </script>
49 </head>
50 <body>
51 <form id="form1" runat="server">
52 <div>
53 <span>姓 名</span>
54 <input id="name" type="text"/>
55 </div>
56 <div>
57 <span>身份证号码</span>
58 <input id="idCard" type="text"/>
59 </div>
60 <div>
61 <span>年龄</span>
62 <input id="age" type="text"/>
63 </div>
64 </form>
65 </body>
转载于:https://www.cnblogs.com/muyixiaoguang/p/3855622.html
标签：10,12,用户,userCard,substring,细节,nowDate,体验,var 来源： https://blog.csdn.net/weixin_30521649/article/details/98168193