js实现显示手机号码效果


Posted in Javascript onMarch 09, 2017

效果图:

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>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
javascript中有趣的反柯里化深入分析
Dec 05 Javascript
怎样在JavaScript里写一个swing把数据插入数据库
Dec 10 Javascript
javascript检查表单数据是否改变的方法
Jul 30 Javascript
Javascript中各种trim的实现详细解析
Dec 10 Javascript
jQuery .tmpl() 用法示例介绍
Aug 21 Javascript
jQuery中andSelf()方法用法实例
Jan 08 Javascript
JS中BOM相关知识点总结(必看篇)
Nov 22 Javascript
jquery实现input框获取焦点的简单实例
Jan 26 Javascript
weex里Vuex state使用storage持久化详解
Sep 09 Javascript
axios简单实现小程序延时loading指示
Jul 30 Javascript
JS合并两个数组的3种方法详解
Oct 24 Javascript
vuex存储token示例
Nov 11 Javascript
jQuery插件HighCharts绘制2D半圆环图效果示例【附demo源码下载】
Mar 09 #Javascript
javascript 秒表计时器实现代码
Mar 09 #Javascript
react实现pure render时bind(this)隐患需注意!
Mar 09 #Javascript
使用bootstrap-paginator.js 分页来进行ajax 异步分页请求示例
Mar 09 #Javascript
jQuery插件HighCharts绘制2D金字塔图效果示例【附demo源码下载】
Mar 09 #Javascript
微信小程序 合法域名校验出错详解及解决办法
Mar 09 #Javascript
react性能优化达到最大化的方法 immutable.js使用的必要性
Mar 09 #Javascript
You might like
PHP JSON格式数据交互实例代码详解
2011/01/13 PHP
php 生成短网址原理及代码
2014/01/23 PHP
php封装的表单验证类完整实例
2016/10/19 PHP
PHP sdk实现在线打包代码示例
2020/12/09 PHP
Extjs学习笔记之三 extjs form更多的表单项
2010/01/07 Javascript
js上传图片及预览功能实例分析
2015/04/24 Javascript
基于jQuery+Cookie实现的防止刷新的在线考试倒计时
2015/06/19 Javascript
纯js代码实现未知宽高的元素在指定元素中垂直水平居中显示
2015/09/12 Javascript
Bootstrap分页插件之Bootstrap Paginator实例详解
2016/10/15 Javascript
JavaScript实现的商品抢购倒计时功能示例
2017/04/17 Javascript
Bootstrap fileinput文件上传预览插件使用详解
2017/05/16 Javascript
JavaScript一元正号运算符示例代码
2019/06/30 Javascript
Nodejs + sequelize 实现增删改查操作
2020/11/07 NodeJs
[01:06:54]DOTA2-DPC中国联赛 正赛 RNG vs Dragon BO3 第一场 1月24日
2021/03/11 DOTA
python实现在控制台输入密码不显示的方法
2015/07/02 Python
在python中使用正则表达式查找可嵌套字符串组
2017/10/24 Python
Python队列RabbitMQ 使用方法实例记录
2019/08/05 Python
python 代码实现k-means聚类分析的思路(不使用现成聚类库)
2020/06/01 Python
前端水印的简单实现代码示例
2020/12/02 HTML / CSS
美国领先的户外服装与装备用品店:Moosejaw
2016/08/25 全球购物
世界上最大的街头服饰网站:Karmaloop
2017/02/04 全球购物
俄罗斯一家时尚女装商店:Charuel
2019/12/04 全球购物
下面关于"联合"的题目的输出是什么
2013/08/06 面试题
钳工实习自我鉴定
2013/09/19 职场文书
打架检讨书100字
2014/01/08 职场文书
入党积极分子自我鉴定
2014/02/18 职场文书
单位授权委托书范本
2014/09/26 职场文书
四风查摆问题自查报告
2014/10/10 职场文书
法学专业求职信范文
2015/03/19 职场文书
会议主持人开场白台词
2015/05/28 职场文书
音乐剧猫观后感
2015/06/04 职场文书
勇敢的心观后感
2015/06/09 职场文书
2015年医院保卫科工作总结
2015/07/23 职场文书
2016年五四青年节校园广播稿
2015/12/17 职场文书
详解Mysql和Oracle之间的误区
2021/05/18 MySQL
教你win10系统中APPCRASH事件问题解决方法
2022/07/15 数码科技