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 相关文章推荐
Ext 今日学习总结
Sep 19 Javascript
js Map List 遍历使用示例
Jul 10 Javascript
js将控件隐藏及display属性的使用介绍
Dec 30 Javascript
JavaScript实现判断图片是否加载完成的3种方法整理
Mar 13 Javascript
深入解读JavaScript中的Hoisting机制
Aug 12 Javascript
jquery获取点击控件的绝对位置简单实例
Oct 13 Javascript
BootStrap 获得轮播中的索引和当前活动的焦点对象
May 11 Javascript
利用JS制作万年历的方法
Aug 16 Javascript
javascript实现Java中的Map对象功能的实例详解
Aug 21 Javascript
移动端自适应flexible.js的使用方法(不用三大框架,仅写一个单html页面使用)推荐
Apr 02 Javascript
原生JS实现留言板功能
Feb 08 Javascript
在 HTML 页面中使用 React的场景分析
Jan 18 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 str_pad 函数使用详解
2009/01/13 PHP
php smarty truncate UTF8乱码问题解决办法
2014/06/13 PHP
php微信公众平台开发之获取用户基本信息
2015/08/17 PHP
学习php设计模式 php实现工厂模式(factory)
2015/12/07 PHP
浅谈htmlentities 、htmlspecialchars、addslashes的使用方法
2016/12/09 PHP
php中的钩子理解及应用实例分析
2019/08/30 PHP
javascript中对对层的控制
2006/12/29 Javascript
JQuery Ajax通过Handler访问外部XML数据的代码
2010/06/01 Javascript
jquery及原生js获取select下拉框选中的值示例
2013/10/25 Javascript
node.js中的http.createClient方法使用说明
2014/12/15 Javascript
JS实现简洁、全兼容的拖动层实例
2015/05/13 Javascript
JS实现自定义简单网页软键盘效果代码
2015/11/05 Javascript
javascript每日必学之循环
2016/02/19 Javascript
原生js制作日历控件实例分享
2016/04/06 Javascript
JavaScript中的this使用详解
2016/07/27 Javascript
ajax图片上传,图片异步上传,更新实例
2016/12/30 Javascript
vue购物车插件编写代码
2017/11/27 Javascript
vue template中slot-scope/scope的使用方法
2018/09/06 Javascript
详解React 服务端渲染方案完美的解决方案
2018/12/14 Javascript
JSON字符串操作移除空串更改key/value的介绍
2019/01/05 Javascript
JavaScript数据结构与算法之二叉树遍历算法详解【先序、中序、后序】
2019/02/21 Javascript
通过JavaScript下载文件到本地的方法(单文件)
2019/03/17 Javascript
Vue中computed、methods与watch的区别总结
2019/04/10 Javascript
前端面试知识点目录一览
2019/04/15 Javascript
数据挖掘之Apriori算法详解和Python实现代码分享
2014/11/07 Python
Django添加favicon.ico图标的示例代码
2018/08/07 Python
Python实现高斯函数的三维显示方法
2018/12/29 Python
浅谈python标准库--functools.partial
2019/03/13 Python
python函数装饰器之带参数的函数和带参数的装饰器用法示例
2019/11/06 Python
Python 使用type来定义类的实现
2019/11/19 Python
ETO男装官方网店:ETO Jeans
2019/02/28 全球购物
医院辞职信范文
2014/01/17 职场文书
教师业务学习材料
2014/12/16 职场文书
自我检讨书范文
2015/01/28 职场文书
2015年行政执法工作总结
2015/05/23 职场文书
Python中os模块的简单使用及重命名操作
2021/04/17 Python