仿淘宝话费充值手机号码提示

解析

1、CSS：position:relative、absolute。

2、事件：onkeyup、onblur。

3、匹配手机号正则表达式。

效果

代码

 1 <style type="text/css">
 2     *{
 3         margin:0;
 4         padding:0;
 5     }
 6
 7     form{
 8         width:300px;
 9         position:relative;
10         margin:10px;
11     }
12
13     fieldset{
14         padding:10px;
15         border:1px dashed #ddd;
16     }
17
18     #num_info{
19         display:none;
20         position:absolute;
21         left:11px;
22         bottom:37px;
23         border:1px solid #bbb;
24         background-color:#f6f6f6;
25         font:20px/30px verdana,arial;
26         color:#F90;
27     }
28
29     #num{
30         width:160px;
31         height:24px;
32         line-height:24px;
33         margin-top:40px;
34         border:1px solid #bbb;
35     }
36     #num:focus{
37         border-color:#999;
38     }
39
40
41 </style>
42 <form>
43     <fieldset>
44         <legend>Telephone Number</legend>
45         <label id=‘num_info‘ for="num"></label>
46         <input type="text" id="num" maxlength="11" />
47     </fieldset>
48 </form>
49 <script type="text/javascript">
50     window.onload=function(){
51         var $num_info=document.getElementById(‘num_info‘),
52             $num=document.getElementById(‘num‘),
53             _val,_val1,_val2;
54             $num.onkeyup=function(){
55                 var val=this.value=this.value.replace(/[^\d]/g,‘‘),
56                 len=val.length;
57                 if(val!=‘‘){$num_info.style.display=‘block‘;}
58                 if(len<=3){
59                     _val=_val1=val.substr(0,3);
60                 }
61                 else if(len>3 && len<=7){
62                     _val=_val2=_val1+"-"+val.substr(3,len);
63                 }else if(len>7){
64                     _val=_val2+‘-‘+val.substr(7,len);
65                 }
66
67                 $num_info.innerHTML=_val;
68             }
69
70             $num.onblur=function(){
71                 $num_info.style.display=‘none‘;
72             }
73     }
74
75 </script>