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

解析

     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>