项目积累(二)细节问题，提高用户体验

最新推荐文章于 2023-03-01 09:10:19 发布

weixin_30521649

最新推荐文章于 2023-03-01 09:10:19 发布

阅读量165

点赞数

原文链接：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

weixin_30521649

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
项目积累(二)细节问题，提高用户体验

　　前两天和同事讨论公司系统一个身份证录入文本框，发现还有一个要录入年龄的文本框，都感觉挺麻烦的。其实当录入身份证号后，年龄就是固定的，想到这就动手写jQuery来改进系统，提高用户体验。　　首先，身份证从第七位开始时年龄段，如：410223199910210000，这样，就获取身份证的从第七位开始和接下来的八位。在获取当前时间，相减获取年龄。这样做还是不是准确的，还要考虑月份和具体每天。代...
复制链接

扫一扫