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

ゞ浴缸里的玫瑰 2022-08-14 04:49 163阅读 0赞

<!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>telephone number</title>
    
    <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.οnlοad=function(){
            var $numInfo=document.getElementById('num_info'),
                    $num=document.getElementById('num'),_val,_val1,_val2;
            $num.οnblur=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>