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 29 Javascript
javascript 禁止复制网页
Jun 11 Javascript
Jquery+ajax请求data显示在GridView上(asp.net)
Aug 27 Javascript
js中使用replace方法完成某个字符的转换
Aug 20 Javascript
javascript学习笔记(一)基础知识
Sep 30 Javascript
jquery任意位置浮动固定层插件用法实例
May 29 Javascript
jQuery实现的调整表格行tr上下顺序
Jan 10 Javascript
基于jQuery仿淘宝产品图片放大镜特效
Oct 19 Javascript
jQuery toggle 代替方法
Mar 22 Javascript
使用vue 国际化i18n 实现多实现语言切换功能
Oct 11 Javascript
react 移动端实现列表左滑删除的示例代码
Jul 04 Javascript
8个JS的reduce使用实例和reduce操作方式
Oct 05 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 全文搜索和替换的实现代码
2008/07/29 PHP
JSON用法之将PHP数组转JS数组,JS如何接收PHP数组
2015/10/08 PHP
PHP实现的服务器一致性hash分布算法示例
2018/08/09 PHP
Laravel框架之解决前端显示图片问题
2019/10/24 PHP
PHP 对象接口简单实现方法示例
2020/04/13 PHP
Jquery中的CheckBox、RadioButton、DropDownList的取值赋值实现代码
2011/10/12 Javascript
Textbox控件注册回车事件及触发按钮提交事件具体实现
2013/03/04 Javascript
使用jquery实现简单的ajax
2013/07/08 Javascript
各浏览器对document.getElementById等方法的实现差异解析
2013/12/05 Javascript
ajaxFileUpload.js插件支持多文件上传的方法
2014/09/02 Javascript
使用jQuery获得内容以及内容的属性
2015/02/26 Javascript
浅谈Sticky组件的改进实现
2016/03/22 Javascript
JS限制条件补全问题实例分析
2016/12/16 Javascript
JS二叉树的简单实现方法示例
2017/04/05 Javascript
JS SetInterval 代码实现页面轮询
2017/08/11 Javascript
JS验证码实现代码
2017/09/14 Javascript
解决vue初始化项目时,一直卡在Project description上的问题
2019/10/31 Javascript
[01:06:07]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS CIS
2014/05/22 DOTA
对于Python的框架中一些会话程序的管理
2015/04/20 Python
Python实现的数据结构与算法之双端队列详解
2015/04/22 Python
python编程实现归并排序
2017/04/14 Python
详解python中docx库的安装过程
2019/11/08 Python
Python 实现取多维数组第n维的前几位
2019/11/26 Python
使用CSS3制作饼状旋转载入效果的实例
2015/06/23 HTML / CSS
俄罗斯的精英皮具:Wittchen
2018/01/29 全球购物
逃课上网检讨书
2014/02/20 职场文书
公务员保密承诺书
2014/03/27 职场文书
优秀的应届生自荐信
2014/05/23 职场文书
诚信考试标语
2014/06/24 职场文书
党员群众路线对照检查材料
2014/08/31 职场文书
违纪学生保证书
2015/02/27 职场文书
2015年基层党建工作汇报材料
2015/06/25 职场文书
大学生社会实践感想
2015/08/11 职场文书
Python中os模块的简单使用及重命名操作
2021/04/17 Python
html+css实现赛博朋克风格按钮
2021/05/26 HTML / CSS
WINDOWS 64位 下安装配置mysql8.0.25最详细的教程
2022/03/22 MySQL