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 相关文章推荐
jQuery中使用了document和window哪些属性和方法小结
Sep 13 Javascript
JS中setInterval、setTimeout不能传递带参数的函数的解决方案
Apr 28 Javascript
实例剖析AngularJS框架中数据的双向绑定运用
Mar 04 Javascript
AngularJS基础 ng-include 指令示例讲解
Aug 01 Javascript
微信小程序 progress组件详解及实例代码
Oct 25 Javascript
javascript正则表达式模糊匹配IP地址功能示例
Jan 06 Javascript
angularjs使用directive实现分页组件的示例
Feb 07 Javascript
浅谈使用mpvue开发小程序需要注意和了解的知识点
May 23 Javascript
vue中进入详情页记住滚动位置的方法(keep-alive)
Sep 21 Javascript
微信小程序实现简单表格
Feb 14 Javascript
JS实现的简单tab切换功能完整示例
Jun 20 Javascript
vue项目页面嵌入代码块vue-prism-editor的实现
Oct 30 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的ASP防火墙
2006/10/09 PHP
使PHP自定义函数返回多个值
2006/11/26 PHP
php中记录用户访问过的产品,在cookie记录产品id,id取得产品信息
2011/05/04 PHP
关于PHP中Object对象的笔记分享
2011/06/28 PHP
thinkPHP自动验证、自动添加及表单错误问题分析
2016/10/17 PHP
PHP设计模式之适配器模式原理与用法分析
2018/04/25 PHP
JS连接SQL数据库与ACCESS数据库的方法实例
2013/11/21 Javascript
showModalDialog在谷歌浏览器下会返回Null的解决方法
2013/11/27 Javascript
通过Jquery的Ajax方法读取将table转换为Json
2014/05/31 Javascript
简单实现限制uploadify上传个数
2015/11/16 Javascript
AngularJS 面试题集锦
2016/09/06 Javascript
微信小程序 vidao实现视频播放和弹幕的功能
2016/11/02 Javascript
js判断用户是输入的地址请求的路径(实例讲解)
2017/07/18 Javascript
微信小程序实现弹出菜单功能
2018/06/12 Javascript
vue 中Virtual Dom被创建的方法
2019/04/15 Javascript
javascript设计模式 ? 模板方法模式原理与用法实例分析
2020/04/23 Javascript
使用beaker让Facebook的Bottle框架支持session功能
2015/04/23 Python
在Python程序中实现分布式进程的教程
2015/04/28 Python
python生成圆形图片的方法
2020/03/25 Python
Python编程求质数实例代码
2018/01/31 Python
python opencv旋转图像(保持图像不被裁减)
2018/07/26 Python
python实现反转部分单向链表
2018/09/27 Python
Pyqt清空某一个QTreeewidgetItem下的所有分支方法
2019/06/17 Python
python实现各种插值法(数值分析)
2019/07/30 Python
500行代码使用python写个微信小游戏飞机大战游戏
2019/10/16 Python
解决Alexnet训练模型在每个epoch中准确率和loss都会一升一降问题
2020/06/17 Python
Python命令行参数定义及需要注意的地方
2020/11/30 Python
罗德与泰勒百货官网:Lord & Taylor
2016/08/12 全球购物
Tommy Hilfiger美国官网:美国高端休闲领导品牌
2019/01/14 全球购物
收款授权委托书
2014/10/02 职场文书
党员批评与自我批评
2014/10/15 职场文书
学校政风行风评议心得体会
2014/10/21 职场文书
简易离婚协议书范本
2014/10/24 职场文书
解决Nginx 配置 proxy_pass 后 返回404问题
2021/03/31 Servers
Vue3如何理解ref toRef和toRefs的区别
2022/02/18 Vue.js
Python编程中内置的NotImplemented类型的用法
2022/03/23 Python