仿淘宝话费充值*提示

解析

     1、CSS：position:relative、absolute。

     2、事件：onkeyup、onblur。

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

效果

代码

<style type="text/css">
    *{
        margin:0;
        padding:0;
    }
    
    form{
        width:300px;
        position:relative;
        margin:10px;
    }
    
    fieldset{
        padding:10px;
        border:1px dashed #ddd;
    }
    
    #num_info{
        display:none;
        position:absolute;
        left:11px;
        bottom:37px;
        border:1px solid #bbb;
        background-color:#f6f6f6;
        font:20px/30px verdana,arial;
        color:#F90;
    }
    
    #num{
        width:160px;
        height:24px;
        line-height:24px;
        margin-top:40px;
        border:1px solid #bbb;
    }
    #num:focus{
        border-color:#999;
    }
    
    
</style>
<form>
    <fieldset>
        <legend>Telephone Number</legend>
        <label id='num_info' for="num"></label>
        <input type="text" id="num" maxlength="11" />
    </fieldset>
</form>
<script type="text/javascript">
    window.onload=function(){
        var $num_info=document.getElementById('num_info'),
            $num=document.getElementById('num'),
            _val,_val1,_val2;
            $num.onkeyup=function(){
                var val=this.value=this.value.replace(/[^d]/g,''),
                len=val.length;
                if(val!=''){$num_info.style.display='block';}
                if(len<=3){
                    _val=_val1=val.substr(0,3);
                }
                else if(len>3 && len<=7){
                    _val=_val2=_val1+"-"+val.substr(3,len);
                }else if(len>7){
                    _val=_val2+'-'+val.substr(7,len);
                }
                
                $num_info.innerHTML=_val;
            }
            
            $num.onblur=function(){
                $num_info.style.display='none';
            }
    }
    
</script>