介绍 & lt; ! doctype html>
& lt; html>
& lt; head>
& lt; meta charset=皍tf-8"祝辞
& lt; title> telephone number</title>
& lt; style>
* {
,,,保证金:0;
,,,填充:0;
}
{形式
,,,宽度:300 px;
,,,位置:相对;
,,,保证金:10 px;
}
自定义字段{
,,,填充:10 px;
,,,边界:1 px dashed # ddd;
}
# num_info {
,,,显示:没有;
,,,位置:绝对;
,,,左:,11 px;
,,,底部:,37 px;
,,,宽度:,170 px;
,,,身高:30 px;
,,,边界:1 px solid # ddd;
,,,边界底部:没有;
,,,背景颜色:# f6f6f6;
,,,字体:20 px/30 px verdana, arial;
,,,颜色:#法郎;,,,,
}
# num {
,,,宽度:170 px;
,,,身高:24 px;
,,,行高:24 px;
,,,margin-top: 40像素;
,,,边界:1 px solid # bbb;
}
# num:{焦点
,,,大纲:没有;
,,,边框颜色:# 999;
}
p {
,,,字体大小:12 px;
,,,颜色:# 999;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; form>
,,,& lt; fieldset>
,,,,,,,& lt; label id=皀um_info",,=皀um"祝辞& lt;/label>
,,,,,,,& lt; input 类型=皌ext", id=皀um",最大长度=?1“比;
,,,& lt;/fieldset>
& lt;/form>
& lt; script>
window=function () {
,,,var $ numInfo=. getelementbyid (& # 39; num_info& # 39;),
,,,,,,,$ num=. getelementbyid (& # 39; num # 39;),
,,,,,,,,_val _val1, _val2;
,,,美元num.onkeyup=function () {
,,,,,,,var val=this.value=https://www.yisu.com/zixun/this.value.replace (/(^/d)/g”),
len=val.length;
如果(val !=") {$ numInfo.style.display=翱椤?}
如果(len <=3) {
_val=_val1=val.substr (0, 3);
}
else if (len> 3 len <=7) {
_val=_val2=_val1 +“-”+ val.substr (len);
}
else if (len> 7) {
_val=_val2 +“-”+ val.substr (7, len);
}
美元numInfo.innerHTML=_val;
}
$ num.onblur=function () {
美元numInfo.style.display='没有';
}
}>
这篇文章主要介绍了js如何实现显示手机号码效果,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获、下面让小编带着大家一起了解一下。
<>强效果图:
<强>代码如下: