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

最新推荐文章于 2024-05-17 15:14:51 发布

夏末_阳光依然耀眼

最新推荐文章于 2024-05-17 15:14:51 发布

阅读量1.2k

点赞数

分类专栏： html5+css3 div+css

本文链接：https://blog.csdn.net/boyit0/article/details/41678023

版权

div+css 同时被 2 个专栏收录

89 篇文章 0 订阅

订阅专栏

html5+css3

25 篇文章 0 订阅

订阅专栏

<!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.ο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>

夏末_阳光依然耀眼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js+css手机号码提示信息框

telephone number-->*{ margin:0; padding:0;}form{ width:300px; position:relative; margin:10px;}fieldset{ padding:10px; border:1px dashed #
复制链接

扫一扫

专栏目录