<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
form{ 300px;margin: 10px;position: relative;}
fieldset{padding: 10px;border:1px dashed #ddd; }
#tag{ 180px;height: 30px;position: absolute;left: 13px;bottom: 37px;border: 1px solid #ddd;background-color: #f6f6f6;font:20px/30px verdana,arial;color: #f90;display: none;}
#num{ 170px;height: 24px;line-height:24px;margin-top: 40px;border: 1px solid #bbb;padding: 2px 5px;}
</style>
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
</head>
<body>
<form>
<fieldset>
<legend>Telephone Number</legend>
<label id="tag"></label>
<input type="text" id="num" maxlength="11">
</fieldset>
</form>
<script type="text/javascript">
// var _var,var1 ,var2,var3;
// var num=document.getElementById('num');
// var tag=document.getElementById('tag');
// num.onkeyup=function(){
// var value=this.value=this.value.replace(/[^\d]/g,"");
// var length=value.length;
// if(value!=""){
// tag.style.display="block";
// }
// if(length<=3){
// _var=var1=value.substr(0,3);
// }else if(length>3&&length<=7){
// _var=var2=var1+"-"+value.substr(3,length);
// }else if(length>7){
// _var=var3=var2+"-"+value.substr(7,length);
// }
// tag.innerHTML=_var;
// }
// num.onblur=function(){
// tag.style.display="none";
// }
var _var,var1 ,var2,var3;
$("#num").onkeyup=function(){
var value=this.value()=this.value().replace(/[^\d]/g,"");
var length=value.length();
if(value!=""){
$("#tag").style.display="block";
}
if(length<=3){
_var=var1=value.substr(0,3);
}else if(length>3&&length<=7){
_var=var2=var1+"-"+value.substr(3,length);
}else if(length>7){
_var=var3=var2+"-"+value.substr(7,length);
}
$("#tag").innerHTML=_var;
}
$("#num").onblur=function(){
$("#tag").style.display="none";
}
</script>
</body>
</html>
注释掉的jq方法，不明白bug在哪，有机会再解决。