js+css手机号码提示信息框

来源：互联网发布：sql删除存储过程语句编辑：程序博客网时间：2024/05/19 02:19
<!doctype html><html><head><meta charset="utf-8"><title>telephone number</title><!--<script src="jquery-1.10.1.min.js"></script>--><style>*{        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: 45px;        width: 170px;        height:30px; line-height:30px;        border:1px solid #ddd;        background-color:#f6f6f6;        font:20px/30px verdana,arial;        color:#F90;        }#num{        width:170px;        height:24px;        line-height:24px;        margin-top:40px;}#num:focus{        outline:none;        border-color:#999;}.y,.z{position:absolute;left:80px;}.y{color:#f6f6f6;bottom:-14px; *bottom:-16px;}/*模拟小三角*/.z{color:#ddd;bottom:-15px; *bottom:-17px;}/*模拟小三角*/</style></head><body><form>        <fieldset>                <div id="num_info">                <span id="num"></span>                <b class="z">◆</b><b class="y">◆</b>                </div>                <input type="text" id="num" maxlength="11" onKeyUp="aa(this.value)">        </fieldset></form><script>window.onload=function(){        var $numInfo=document.getElementById('num_info'),                $num=document.getElementById('num'),_val,_val1,_val2;        $num.onblur=function(){                $numInfo.style.display='none';                        }}function aa(val){var val=val.replace(/[^\d]/g,''),len=val.length;   if(val.length>0){var $numInfo=document.getElementById('num_info');    $numInfo.style.display='block';   }else{var $numInfo=document.getElementById('num_info');    $numInfo.style.display='none';  }                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);                }               document.getElementById('num').innerHTML=_val;}</script></body></html>
0 0