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 相关文章推荐
HTML DOM的nodeType值介绍
Mar 31 Javascript
纯Javascript实现Windows 8 Metro风格实现
Oct 15 Javascript
使用JQuery在线制作ppt并在线演示源码特效
Sep 08 Javascript
完美实现八种js焦点轮播图(上篇)
Jul 18 Javascript
微信小程序 navigation API实例详解
Oct 02 Javascript
xmlplus组件设计系列之分隔框(DividedBox)(8)
May 02 Javascript
在iframe中使bootstrap的模态框在父页面弹出问题
Aug 07 Javascript
360提示[高危]使用存在漏洞的JQuery版本的解决方法
Oct 27 jQuery
Vue中使用matomo进行访问流量统计的实现
Nov 05 Javascript
JS访问对象两种方式区别解析
Aug 29 Javascript
vue配置多代理服务接口地址操作
Sep 08 Javascript
token 机制和实现方式
Dec 15 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来处理多个提交任务
2006/10/09 PHP
php数组应用之比较两个时间的相减排序
2008/08/18 PHP
Windows2003下php5.4安装配置教程(IIS)
2016/06/30 PHP
CI框架无限级分类+递归的实现代码
2016/11/01 PHP
thinkphp5实现微信扫码支付
2019/12/23 PHP
php实现通过stomp协议连接ActiveMQ操作示例
2020/02/23 PHP
JS获取IUSR_机器名和IWAM_机器名帐号的密码
2006/12/06 Javascript
js类中获取外部函数名的方法
2007/08/19 Javascript
javascript 面向对象编程 function也是类
2009/09/17 Javascript
JQuery下关于$.Ready()的分析
2009/12/13 Javascript
用jquery生成二级菜单的实例代码
2013/06/24 Javascript
js输入框邮箱自动提示功能代码实现
2013/12/10 Javascript
浅谈jQuery中 wrap() wrapAll() 与 wrapInner()的差异
2014/11/12 Javascript
JS在可编辑的div中的光标位置插入内容的方法
2014/11/20 Javascript
浅谈javascript 函数内部属性
2015/01/21 Javascript
巧用Javascript的逻辑运算符
2016/12/02 Javascript
简单实现Bootstrap标签页
2020/08/09 Javascript
详解Vue用axios发送post请求自动set cookie
2017/05/10 Javascript
JavaScript的六种继承方式(推荐)
2017/06/26 Javascript
原生JS实现自定义滚动条效果
2020/10/27 Javascript
Vue SPA单页应用首屏优化实践
2018/06/28 Javascript
echarts实现词云自定义形状的示例代码
2019/02/20 Javascript
基于mpvue的简单弹窗组件mptoast使用详解
2019/08/02 Javascript
利用JavaScript模拟京东按键输入功能
2020/12/01 Javascript
python发送邮件示例(支持中文邮件标题)
2014/02/16 Python
python实现mysql的读写分离及负载均衡
2018/02/04 Python
Windows下python3安装tkinter的问题及解决方法
2020/01/06 Python
使用PyWeChatSpy自动回复微信拍一拍功能的实现代码
2020/07/02 Python
python爬取代理IP并进行有效的IP测试实现
2020/10/09 Python
Expedia爱尔兰:酒店、机票、租车及廉价假期
2017/01/02 全球购物
美国女性运动零售品牌:Lady Foot Locker
2017/05/12 全球购物
英语专业学生个人求职信范文
2014/01/06 职场文书
学习十八大报告感言
2014/02/28 职场文书
2014单位领导班子四风对照检查材料思想汇报
2014/09/25 职场文书
关于长城的导游词
2015/01/30 职场文书
教你使用vscode 搭建react-native开发环境
2021/07/07 Javascript