vue 输入电话号码自动按3-4-4分割功能的实现代码


Posted in Javascript onApril 30, 2020

输入框绑定

<input class="inputBox" type="phone" 
placeholder=" 请输入手机号" 
maxlength="13" v-model="phoneNum"/>

监听事件,每次号码发生改变时触发
大体的逻辑是:先比较号码变化前后的长度,判断是输入还是删除,如果是输入的话,利用正则表达式改变号码格式。

watch: {
 phoneNum (newValue, oldValue) { // 监听电话号码
 this.phoneNum = newValue.length > oldValue.length ? newValue.replace(/\s/g, '').replace(/(\d{3})(\d{0,4})(\d{0,4})/, '$1 $2 $3') : this.phoneNum.trim()
 if (this.phoneNum.length === 13) {
 // 验证/保存的手机号码,去除空格
 this.state.checkPhoneNum = this.phoneNum.replace(/\s/g, '')
 console.log('输入的电话号码是:', this.state.checkPhoneNum)
 } 
 }
 },

效果示意

vue 输入电话号码自动按3-4-4分割功能的实现代码

附录:下面看下vue手机号按344分隔,银行卡号每4位空格分隔

实现效果:

1. 手机号输入/粘贴时,不允许输入数字外的其它字符,按344分隔,最大输入11位数字

2. 银行卡号输入/粘贴时,不允许输入数字外的其它字符,每四位用空格分隔

vue 输入电话号码自动按3-4-4分割功能的实现代码

代码:

<template>
 <div class="form">
 <p>
 手机号:
 <input v-model="mobile" type="tel" ref="mobile" maxlength="13" @keyup="inputMobile" @paste="inputMobile" />
 </p>
 <p>
 银行卡号:
 <input v-model="card" type="text" @keyup="inputCard" @paste="inputCard" />
 </p>
 </div>
</template>

js:

<script>
 export default {
 data() {
 return {
 mobile: '',
 card: ''
 }
 },
 methods: {
 inputMobile() {
 let value = this.mobile.replace(/\D/g, '').substr(0, 11) // 不允许输入非数字字符,超过11位数字截取前11位
 let len = value.length
 if (len > 3 && len < 8) {
  value = value.replace(/^(\d{3})/g, '$1 ')
 } else if (len >= 8) {
  value = value.replace(/^(\d{3})(\d{4})/g, '$1 $2 ')
 }
 this.mobile = value
 },
 inputCard() {
 this.card = this.card.replace(/\D/g, '') // 不允许输入非数字字符
 this.card = this.card.replace(/(\d{4})(?=\d)/g, '$1 ') // 4位一组,非获取匹配最后一组数字,避免删除到空格时会马上自动补齐
 }
 }
 } 
</script>

上述方案即可实现基本效果,但如果从中间开始删除或添加内容时,光标会自动跑到最后,如下:

vue 输入电话号码自动按3-4-4分割功能的实现代码

若想光标留在删除/添加内容位置,需要设置光标位置:

vue 输入电话号码自动按3-4-4分割功能的实现代码

修改js如下:

<script>
 export default {
 data () {
 return {
 mobile: '',
 card: ''
 }
 },
 methods: {
 inputMobile (e) {
 this.formatMobile(e)
 this.mobile = this.$refs.mobile.value
 },
 formatMobile (e) {
 let val = this.$refs.mobile.value // 不可直接用this.mobile,第一方便提取该方法降低代码耦合度,第二直接用this.mobile,在输入汉字时按下shift按键会导致无法再输入和删除内容
 let selStart = this.$refs.mobile.selectionStart // 选中区域左边界位置
 let mobileLen = val.length
 let value = this.getValue(e, val).substr(0, 11) // 获取输入/粘贴内容,并截取前11位
 let len = value.length
 if (len > 3 && len < 8) {
  value = value.replace(/^(\d{3})/g, '$1 ')
 } else if (len >= 8) {
  value = value.replace(/^(\d{3})(\d{4})/g, '$1 $2 ')
 }
 this.$refs.mobile.value = value
 if (selStart !== mobileLen) {
  if (selStart === 3) {
  selStart++
  }
  // 设置光标位置
  this.$refs.mobile.selectionStart = this.$refs.mobile.selectionEnd = selStart
 }
 },
 getValue(e, val) {
 let value = ''
 if (e.type === 'keyup') {
  value = val.replace(/\D/g, '')
 } else if (e.type === 'paste') {
  // window.clipboardData:IE浏览器获取剪贴板数据对象
  // event.clipboardData:Chrome, Firefox, Safari获取剪贴板数据对象
  let clipboardData = event.clipboardData || window.clipboardData;
  value = clipboardData.getData('Text'); // 获取剪贴板text格式的数据
  value = value.replace(/\D/g, '')
 }
 return value
 }
 }
 }
</script>

未实现:

不允许粘贴非数字内容到输入框还未实现,改为了提交时校验,如果有比较好的解决方案望大家提出

到此这篇关于vue 输入电话号码自动按3-4-4分割功能的实现代码的文章就介绍到这了,更多相关vue输入电话号码自动分割内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript之编码规范 推荐
May 23 Javascript
js取两个数组的交集|差集|并集|补集|去重示例代码
Aug 07 Javascript
JavaScript中一个奇葩的IE浏览器判断方法
Apr 16 Javascript
JS实现简单的图书馆享元模式实例
Jun 30 Javascript
jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法
Jul 27 Javascript
BootStrap selectpicker
Jun 20 Javascript
javascript事件捕获机制【深入分析IE和DOM中的事件模型】
Dec 15 Javascript
Google 爬虫如何抓取 JavaScript 的内容
Apr 07 Javascript
用vue2.0实现点击选中active其他选项互斥的效果
Apr 12 Javascript
Vue的H5页面唤起支付宝支付功能
Apr 18 Javascript
Vue实现简易计算器
Feb 25 Javascript
js将日期格式转换为YYYY-MM-DD HH:MM:SS
Sep 18 Javascript
浅谈Vue3.0新版API之composition-api入坑指南
Apr 30 #Javascript
JavaScript变量Dom对象的所有属性
Apr 30 #Javascript
vue项目中使用bpmn为节点添加颜色的方法
Apr 30 #Javascript
VSCode搭建Vue项目的方法
Apr 30 #Javascript
jQuery实现的解析本地 XML 文档操作示例
Apr 30 #jQuery
vue使用map代替Aarry数组循环遍历的方法
Apr 30 #Javascript
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
Apr 30 #jQuery
You might like
Windows下的PHP5.0安装配制详解
2006/09/05 PHP
实用的简单PHP分页集合包括使用方法
2013/10/21 PHP
destoon之一键登录设置
2014/06/21 PHP
PHP文字转图片功能原理与实现方法分析
2017/08/31 PHP
表单元素事件 (Form Element Events)
2009/07/17 Javascript
javascript 动态table添加colspan\rowspan 参数的方法
2009/07/25 Javascript
学习ExtJS form布局
2009/10/08 Javascript
JQuery 图片延迟加载并等比缩放插件
2009/11/09 Javascript
利用JQuery的load函数动态加载其它页面的内容的实现代码
2010/12/14 Javascript
使用Post提交时须将空格转换成加号的解释
2013/01/14 Javascript
node.js中的fs.fchmodSync方法使用说明
2014/12/16 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 图片库
2015/01/09 Javascript
JQuery判断radio(单选框)是否选中和获取选中值方法总结
2015/04/15 Javascript
详解JavaScript异步编程中jQuery的promise对象的作用
2016/05/03 Javascript
bootstrap选项卡扩展功能详解
2017/06/14 Javascript
js实现图片旋转 js滚动鼠标中间对图片放大缩小
2017/07/05 Javascript
[05:09]第二届DOTA2亚洲邀请赛决赛日比赛集锦:iG 3:0 OG夺冠
2017/04/05 DOTA
[01:06:26]全国守擂赛第二周 Team Coach vs DeMonsTer
2020/04/28 DOTA
python轻松实现代码编码格式转换
2015/03/26 Python
Python中使用asyncio 封装文件读写
2016/09/11 Python
Python字典简介以及用法详解
2016/11/15 Python
python实现发送邮件功能代码
2017/12/14 Python
Python简单实现的代理服务器端口映射功能示例
2018/04/08 Python
Python 带有参数的装饰器实例代码详解
2018/12/06 Python
基于django ManyToMany 使用的注意事项详解
2019/08/09 Python
在Python中等距取出一个数组其中n个数的实现方式
2019/11/27 Python
详解Ubuntu环境下部署Django+uwsgi+nginx总结
2020/04/02 Python
元旦获奖感言
2014/03/08 职场文书
工作作风懒散检讨书
2014/10/29 职场文书
2014年仓库管理工作总结
2014/12/17 职场文书
迎新生欢迎词
2015/01/23 职场文书
房屋质量投诉书
2015/07/02 职场文书
深入理解CSS 中 transform matrix矩阵变换问题
2021/08/30 HTML / CSS
十大最强火系宝可梦,喷火龙上榜,第一名有双火属性
2022/03/18 日漫
《遗弃》开发商删推文要跑路?官方回应:还在开发
2022/04/03 其他游戏
Pandas 数据编码的十种方法
2022/04/20 Python