jQuery实现手机号码输入提示功能实例

这篇文章主要介绍了jQuery实现手机号码输入提示功能,实例分析了jQuery针对手机号码的判断与提示相关技巧,非常具有实用价值,需要的朋友可以参考下

本文实例讲述了jQuery实现手机号码输入提示功能的方法。分享给大家供大家参考。具体实现方法如下：

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
3. <html xmlns="http://www.w3.org/1999/xhtml"> 
4. <head> 
5. <title>jQuery手机号码输入提示</title> 
6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
7. <style>  
8. *{margin:0;padding:0;} 
9. #main{width:728px;height:300px; 
10. padding:60px;margin:0 auto; 
11. border:5px solid #CCC; 
12. } 
13. input{border: 1px solid #666;} 
14. .a{border: 1px solid red;} 
15. .text-magnifier { 
16. background:none repeat scroll 0 0 #FFFFE4; 
17. border:1px solid #E6C99E; 
18. color:#FF4800; 
19. height:50px; 
20. left:170px; 
21. padding:5px 0 0 10px; 
22. position:absolute; 
23. top:30px; 
24. width:200px; 
25. font:20px Tahoma,Helvetica,Arial,Simsun,sans-serif; 
26. } 
27. .text-magnifier .mag-explain { 
28. border-top:1px solid #E6C99E; 
29. color:#6C6C6C; 
30. font-size:12px; 
31. margin-top:5px; 
32. width:190px; 
33. } 
34. .fn-hide{display:none} 
35. </style> 
36. <script type="text/javascript" src="jquery1.3.2.js"></script> 
37. <script> 
38. $(function(){ 
39. $("#k").focus(function(evt){ 
40. $(this).addClass("a"); 
41. if(this.value.length>0){ 
42. a(this); 
43. d(this); 
44. } 
45. }) 
46. $("#k").keyup(function(evt){ 
47. if(this.value.length==0){ 
48. e(); 
49. }else{ 
50. a(this); 
51. } 
52. d(this); 
53. }) 
54. $("#k").blur(function(evt){ 
55. $(this).removeClass("a"); 
56. e(); 
57. this.value=this.value 
58. }) 
59. }) 
60. //计算div的left和top，显示div 
61. function a(evt){ 
62. var y = 20; 
63. y = $(evt).outerHeight(); 
64. $("#textMag").removeClass("fn-hide"); 
65. var t = $(evt).offset().top; 
66. var l = $(evt).offset().left; 
67. $("#textMag").css({ 
68. "top": (t+y) + "px", 
69. "left":l + "px" 
70. });  
71. } 
72. //隐藏div 
73. function e(){ 
74. $("#textMag").addClass("fn-hide") 
75. } 
76. //控制div里显示的数字 
77. function d(e){ 
78. var i = e.value; 
79. i=$.trim(i); 
80. var h=i.substring(0,3); 
81. i=i.substring(3); 
82. while(i&&i.length>0){ 
83. h+=" "+i.substring(0,4); 
84. i=i.substring(4) 
85. } 
86. $("#mag-text").html(h); 
87. } 
88. </script> 
89. </head> 
90. <body> 
91. <div id="main"> 
92. 手机号码： 
93. <input type="text" id="k" maxlength="11" class="i-text" value="" /> 
94. <div class="text-magnifier fn-hide" id="textMag" > 
95. <div id="mag-text" class="mag-text"></div> 
96. <div class="mag-explain">手机号码是11位数字</div> 
97. <div>http://www.vevb.com/</div> 
98. </body> 
99. </html> 

希望本文所述对大家的jQuery程序设计有所帮助。