js手机号4位显示空格,银行卡每4位显示空格效果


Posted in Javascript onMarch 23, 2017

开发有时候会遇到输入手机号和银行卡号,按照每4位显示一个空格的需求,方便用户阅读,如果是纯展示,就很容易实现,如果是一边输入一边展示则有点难度

有人用两个input实现,一个负责输入数据,但是透明看不见,另外一个展示在界面上,变相的解决了这个需求(手机上可调用数字键盘)

本次取巧写个demo,只用一个input用定时器不断的查询输入的字符来判断输入的数据(无法直接调用数字键盘,因为里边有空格)

如果是银行卡号,将字符判断长度更改为,也可以根据实际需求来判断长度

lastLen === 5 || lastLen === 10 || lastLen === 15|| lastLen === 20

话不多说,上代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 <meta name="renderer" content="webkit">
 <title>Title</title>
</head>
<body>
<input type="text" id="telphone"><span id="err"></span>
<script>
 var telphone = document.getElementById('telphone');
 var err = document.getElementById('err');
 //定义两个缓存值
 var firstLen = 0;
 var lastLen = 0;
 var re=/^1(3|4|5|7|8)\d{9}$/;
 telphone.oninput = function () {
  telphone.value = telphone.value.substr(0, 13);//只允许输入11位+2个空格
  //用户输入满11位开始验证
  if(telphone.value.length==13){
   //将数据去掉空格后验证
   if(!re.test(telphone.value.replace(/\s/g, ''))){
    err.innerHTML='手机号码有误'
   } else{
    err.innerHTML=''
   }
  }else{
   err.innerHTML=''
  }

 }
 telphone.onfocus = function () {
  timer = setInterval(function () {
   lastLen = telphone.value.length;
   if (lastLen > firstLen) {
    firstLen = telphone.value.length;
    if (lastLen === 4 || lastLen === 9) {
     var temp1 = telphone.value.substr(0, telphone.value.length - 1);
     var temp2 = telphone.value.substr(telphone.value.length - 1);
     telphone.value = temp1 + ' ' + temp2;
    }
   } else if (lastLen <= firstLen) {
    if (lastLen === 4 || lastLen === 9) {
     telphone.value = telphone.value.substr(0, telphone.value.length - 1);
    }
    firstLen = telphone.value.length;
   }
  }, 10);//如果手机出现卡顿,可适当把定时器时间加大
 }
</script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js实现图片在未加载完成前显示加载中字样
Sep 03 Javascript
使用JQ来编写最基本的淡入淡出效果附演示动画
Oct 31 Javascript
Web前端新人笔记之jquery入门心得(新手必看)
May 17 Javascript
浅谈JQuery+ajax+jsonp 跨域访问
Jun 25 Javascript
完美解决spring websocket自动断开连接再创建引发的问题
Mar 02 Javascript
基于jQuery实现一个marquee无缝滚动的插件
Mar 09 Javascript
微信小程序之网络请求简单封装实例详解
Jun 28 Javascript
AngularJS模态框模板ngDialog的使用详解
May 11 Javascript
原生实现一个react-redux的代码示例
Jun 08 Javascript
vue中npm包全局安装和局部安装过程
Sep 03 Javascript
在vue+element ui框架里实现lodash的debounce防抖
Nov 13 Javascript
vue tab切换,解决echartst图表宽度只有100px的问题
Jul 19 Javascript
JS实现两周内自动登录功能
Mar 23 #Javascript
面试常见的js算法题
Mar 23 #Javascript
Vue.Js中的$watch()方法总结
Mar 23 #Javascript
Vue 2.X的状态管理vuex记录详解
Mar 23 #Javascript
jQuery插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
Mar 23 #jQuery
jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
Mar 23 #jQuery
jQuery插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
Mar 23 #jQuery
You might like
带密匙的php加密解密示例分享
2014/01/29 PHP
关于JavaScript中var声明变量作用域的推断
2010/12/16 Javascript
原生Js与jquery的多组处理, 仅展开一个区块的折叠效果
2011/01/09 Javascript
精通Javascript系列之数值计算
2011/06/07 Javascript
HTML上传控件取消选择
2013/03/06 Javascript
jQuery学习笔记之 Ajax操作篇(三) - 过程处理
2014/06/23 Javascript
如何在node的express中使用socket.io
2014/12/15 Javascript
jquery右下角自动弹出可关闭的广告层
2015/05/08 Javascript
浅谈node.js中async异步编程
2015/10/22 Javascript
jQuery ajaxForm()的应用
2016/10/14 Javascript
node.js中使用Export和Import的方法
2017/09/18 Javascript
浅析Vue 防抖与节流的使用
2019/11/14 Javascript
arcgis.js控制地图地体的显示范围超出区域自动弹回(实现思路)
2021/01/28 Javascript
详解python中字典的循环遍历的两种方式
2017/02/07 Python
Python编程之序列操作实例详解
2017/07/22 Python
python中使用%与.format格式化文本方法解析
2017/12/27 Python
pytorch GAN生成对抗网络实例
2020/01/10 Python
Tensorflow 实现释放内存
2020/02/03 Python
Python socket连接中的粘包、精确传输问题实例分析
2020/03/24 Python
基于python3.7利用Motor来异步读写Mongodb提高效率(推荐)
2020/04/29 Python
Python爬取阿拉丁统计信息过程图解
2020/05/12 Python
ALDO加拿大官网:加拿大女鞋品牌
2018/12/22 全球购物
俄罗斯金苹果网上化妆品和香水商店:Goldapple
2019/12/01 全球购物
Ticketmaster意大利:音乐会、节日、艺术和剧院的官方门票
2019/12/23 全球购物
Arti-shopping中文官网:大型海外商品一站式直邮平台
2020/03/23 全球购物
LUISAVIAROMA中国官网:时尚奢侈品牌购物网站
2020/11/01 全球购物
波兰运动鞋网上商店:Distance.pl
2020/07/30 全球购物
家长对小学生的评语
2014/01/28 职场文书
理工类毕业自我鉴定
2014/02/20 职场文书
给校长的建议书500字
2014/05/15 职场文书
社区志愿者培训方案
2014/06/10 职场文书
公安局班子个人对照检查材料思想汇报
2014/10/09 职场文书
三严三实心得体会范文
2014/10/13 职场文书
会议室使用管理制度
2015/08/06 职场文书
Python基础学习之奇异的GUI对话框
2021/05/27 Python
Jackson 反序列化时实现大小写不敏感设置
2021/06/29 Java/Android