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 相关文章推荐
Jquery ui css framework
Jun 28 Javascript
判断滚动条到底部的JS代码
Nov 04 Javascript
用原生JS获取CLASS对象(很简单实用)
Oct 15 Javascript
很不错的两款Bootstrap Icon图标选择组件
Jan 28 Javascript
Vue.js 2.0 和 React、Augular等其他前端框架大比拼
Oct 08 Javascript
jQuery实现简单漂亮的Nav导航菜单效果
Mar 29 jQuery
vue引入js数字小键盘的实现代码
May 14 Javascript
小程序登录/注册页面设计的实现代码
May 24 Javascript
Selenium执行Javascript脚本参数及返回值过程详解
Apr 01 Javascript
jQuery 移除事件的方法
Jun 20 jQuery
vuex分模块后,实现获取state的值
Jul 26 Javascript
TypeScript实用技巧 Nominal Typing名义类型详解
Sep 23 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
Can't create/write to file 'C:\WINDOWS\TEMP\...MYSQL报错解决方法
2011/06/30 PHP
php获取数组长度的方法(有实例)
2013/10/27 PHP
WordPress中重置文章循环的rewind_posts()函数讲解
2016/01/11 PHP
解决laravel session失效的问题
2019/10/14 PHP
JavaScript实现当网页加载完成后执行指定函数的方法
2015/03/21 Javascript
JavaScript省市区三级联动菜单效果
2016/09/21 Javascript
将form表单通过ajax实现无刷新提交的简单实例
2016/10/12 Javascript
jQuery布局组件EasyUI Layout使用方法详解
2017/02/28 Javascript
Vue cli+mui 区域滚动的实例代码
2018/01/25 Javascript
解决vue 更改计算属性后select选中值不更改的问题
2018/03/02 Javascript
vue 表单输入格式化中文输入法异常问题
2018/05/30 Javascript
vue interceptor 使用教程实例详解
2018/09/13 Javascript
JavaScript Image对象实现原理实例解析
2020/08/26 Javascript
详解vue 组件注册
2020/11/20 Vue.js
python3使用tkinter实现ui界面简单实例
2014/01/10 Python
Python学习小技巧之利用字典的默认行为
2017/05/20 Python
Python3.6简单操作Mysql数据库
2017/09/12 Python
python下实现二叉堆以及堆排序的示例
2017/09/29 Python
100行python代码实现跳一跳辅助程序
2018/01/15 Python
使用Python操作FTP实现上传和下载的方法
2019/04/01 Python
简单了解python的break、continue、pass
2019/07/08 Python
PyQt+socket实现远程操作服务器的方法示例
2019/08/22 Python
Python描述符descriptor使用原理解析
2020/03/21 Python
在tensorflow下利用plt画论文中loss,acc等曲线图实例
2020/06/15 Python
使用python-cv2实现Harr+Adaboost人脸识别的示例
2020/10/27 Python
用CSS3打造HTML5的Logo(实现代码)
2016/06/16 HTML / CSS
德国网上花店:Valentins
2018/08/15 全球购物
企业治理工作自我评价
2013/09/26 职场文书
经理管理专业自荐信范文
2013/12/31 职场文书
行政部经理助理岗位职责
2014/06/15 职场文书
2015年教师节慰问信
2015/03/23 职场文书
在职证明书模板
2015/06/15 职场文书
文艺节目主持词
2015/07/06 职场文书
幼儿园安全教育随笔
2015/08/14 职场文书
小学2016年第十八届推普周活动总结
2016/04/05 职场文书
SpringBoot2零基础到精通之数据与页面响应
2022/03/22 Java/Android