js实现显示手机号码效果
作者：yonghuming 发布时间：2024-07-17 04:25:47
标签：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>
来源：http://www.qdfuns.com/notes/41946/e187958b5aec7bc1f79f4e11d16e995f.html
0
投稿猜你喜欢
- 这段时间在处理SQL server 2000 SP4补丁打不上的问题上花了不少时间，回头想想应该总结一下：系统说明：dell1800服务器，
- CSS Sprites技术早在2005年 CSS Zengarden 的园主 Dave Shea就在ALA发表对该技术的详细阐述。原先只在C
- 在 AbpBase.Database 中，通过 Nuget 添加以下几个库：版本都是 1.9.0-preview0917
说到这个问题，基本上有人就会想到三个问题：1，什么是系统数据？2，为什么要移动系统数据库？3，移动系统数据库我们可以用附加和分离，为什么还要- def cndebug(obj=False): """ Author : Nemon Update : 200
- 加了三个验证漏洞以及四个getshell方法# /usr/bin/env python3# -*- coding: utf-8 -*-# @
- 前言在 Qt 中可以使用信号和槽机制很方便地实现部件之间的通信，考虑下面这样的场景：我想要点击任意一个专辑卡并通知主界面跳转到专辑界面，那么
- 某天在群内有同学问到，在python下我用input或者raw_input都得输入完后回车才能获取到输入的值，那如何实现任意键退出暂停等功能
- 导语学习一下golang权限控制，保留一下demo代码作为参考Casbin是什么Casbin是一个强大的、高效的开源访问控制框架，其权限管理
- Web应用中大多会提供静态文件服务以便给用户更好的访问体验。静态文件主要包含CSS样式文件，js脚本，图片和字体等。Flask也支持静态文件
- go-micro是golang的一个微服务框架。这篇文章将介绍使用go-micro最新版本v4开发gRPC服务的方式。1、安装protoc这
- 下标所谓下标就是编号，就好比超市中存储柜的编号，通过这个编号就能找到相应的存储空间。Python中字符串，列表，元祖均支持下标索引。例如：#
- 函数的概念，函数是将具有独立功能的代码块组织成为一个整体，使其具有特殊功能的代码集函数的作用，使用函数可以加强代码的复用性，提高程序编写的效
- 实例代码如下def demo(): print("开始执行...") while 1: &nbs
- 使用python的turtle库画一个方格和圆打开python编译器,导入turtle库from turtle import *首先画一个距
- 闭包与defer1.闭包闭包 ： 一个函数与其相关的引用环境组合的一个实体，其实可以理解为面向对象中类中的属性与方法。如代码块中，函数fun
- 一、jupyter notebook是什么官网的介绍是：Jupyter Notebook是一个Web应用程序，允许您创建和共享包含实时代码，
- 在上一期中作者向诸位简要介绍了 ASP 脚本语言之一 VBScript 的一些基本常识，本期将继续给大家讲解 VBScript 的脚本编写方
- 新建项目如下图，比如sigma目录是我要上传的项目，在six-sigma目录下新建三个文件，分别是LICENSE也就是开源协议，README
- Go 单元测试工具测试分为4个层次单元测试：对代码进行测试集成测试：对一个服务的接口测试端到端测试（链路测试）：从一个链路的入口输入测试用例
