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

最新推荐文章于 2022-10-17 19:35:30 发布

原创最新推荐文章于 2022-10-17 19:35:30 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

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

89 篇文章

订阅专栏

html5+css3

25 篇文章

订阅专栏

本文介绍了一个简单的HTML页面，该页面使用JavaScript实现电话号码的实时格式化功能。当用户在文本框中输入数字时，系统会自动将号码格式化为标准格式，如123-4567-8901。此功能通过监听输入事件并在输入时即时处理电话号码格式来实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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