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 相关文章推荐
bcastr2.0 通用的图片浏览器
Nov 22 Javascript
JavaScript中的Location地址对象
Jan 16 Javascript
js实现下拉列表选中某个值的方法(3种方法)
Dec 17 Javascript
JS字符串的切分用法实例
Feb 22 Javascript
js简单判断flash是否加载完成的方法
Jun 21 Javascript
jQuery视差滚动效果网页实现方法经验总结
Sep 29 Javascript
什么是JavaScript中的结果值?
Oct 08 Javascript
JavaScript你不知道的一些数组方法
Aug 18 Javascript
Windows下Node.js安装及环境配置方法
Sep 18 Javascript
小程序websocket心跳库(websocket-heartbeat-miniprogram)
Feb 23 Javascript
vue中的.$mount('#app')手动挂载操作
Sep 02 Javascript
javascript实现滚轮轮播图片
Dec 13 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
使用PHP和XSL stylesheets转换XML文档
2006/10/09 PHP
php下拉选项的批量操作的实现代码
2013/10/14 PHP
php微信公众账号开发之前五个坑(一)
2016/09/18 PHP
PHP实现微信退款功能
2018/10/02 PHP
Ajax同步与异步传输的示例代码
2013/11/21 Javascript
javascript获取form里的表单元素的示例代码
2014/02/14 Javascript
js无刷新操作table的行和列
2014/03/27 Javascript
Nodejs进程管理模块forever详解
2014/06/01 NodeJs
JavaScript中获取高度和宽度函数总结
2014/10/08 Javascript
jQuery调用ajax请求的常见方法汇总
2015/03/24 Javascript
js实现带简单弹性运动的导航条
2017/02/22 Javascript
vue-cli脚手架搭建的项目去除eslint验证的方法
2018/09/29 Javascript
Vue + Scss 动态切换主题颜色实现换肤的示例代码
2020/04/27 Javascript
小程序表单认证布局及验证详解
2020/06/19 Javascript
在vue中实现清除echarts上次保留的数据(亲测有效)
2020/09/09 Javascript
[54:18]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS BO3 第一场 1月22日
2021/03/11 DOTA
简单介绍Python下自己编写web框架的一些要点
2015/04/29 Python
Django如何配置mysql数据库
2018/05/04 Python
修改python plot折线图的坐标轴刻度方法
2018/12/13 Python
详解Python 解压缩文件
2019/04/09 Python
Python 获取numpy.array索引值的实例
2019/12/06 Python
PyCharm使用之配置SSH Interpreter的方法步骤
2019/12/26 Python
Python 实现向word(docx)中输出
2020/02/13 Python
Python爬虫爬取微信朋友圈
2020/08/06 Python
python中常用的数据结构介绍
2021/01/12 Python
CSS3 Backgrounds属性相关介绍
2011/05/11 HTML / CSS
H5仿微信界面教程(一)
2017/07/05 HTML / CSS
印尼太阳百货公司网站:Matahari
2018/02/04 全球购物
linux面试题参考答案(3)
2012/09/13 面试题
职业生涯规划书范文
2014/03/10 职场文书
小学生学雷锋演讲稿
2014/04/25 职场文书
2015国庆节66周年演讲稿
2015/03/20 职场文书
小学庆六一主持词
2015/06/30 职场文书
2016机关干部作风建设心得体会
2016/01/21 职场文书
纯html+css实现打字效果
2021/08/02 HTML / CSS
JavaScript选择器函数querySelector和querySelectorAll
2021/11/27 Javascript