js实现显示手机号码效果

效果图：

代码如下：

<!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: 37px;
    width: 170px;
    height:30px;
    border:1px solid #ddd;
    border-bottom:none;
    background-color:#f6f6f6;
    font:20px/30px verdana,arial;
    color:#F90;    
}
#num{
    width:170px;
    height:24px;
    line-height:24px;
    margin-top:40px;
    border:1px solid #bbb;
}
#num:focus{
    outline:none;
    border-color:#999;
}
p{
    font-size:12px;
    color:#999;
}
</style>
</head>
<body>
<form>
    <fieldset>
        <label id="num_info" for="num"></label>
        <input type="text" id="num" maxlength="11">
    </fieldset>
</form>
<script>
window.onload=function(){
    var $numInfo=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!=''){$numInfo.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);
        }
        $numInfo.innerHTML=_val;
    }
    $num.onblur=function(){
        $numInfo.style.display='none';        
    }
}
</script>
</body>
</html>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！

# js # 手机 # 号码 # javascript 手机号码正则表达式验证函数 # js 手机号码合法性验证代码集合 # 实用的JS正则表达式(手机号码/IP正则/邮编正则/电话等) # js验证电话号码与手机支持+86的正则表达式 # js验证输入是否为手机号码或电话号码示例 # 验证手机号码的JS方法分享 # javascript IP、域名、手机号码正则表达式验证代码 # javascript 手机号码验证是否正确 # js验证电话号码手机号码的正则表达式 # js代码验证手机号码和电话号码是否合法 # border # fieldset # dashed # num_info # ddd # width # px # relative # position # height # background # solid # absolute # display # left # bottom # form # brush # class # xhtml

返回目录在线咨询

上一篇：网络营销的宣传文案,长治市南烨统配煤炭销售有限公司介绍？
下一篇：C++如何实现一个简单的事件分发器_C++实现基于回调的事件驱动模型

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

js实现显示手机号码效果

您的项目需求