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 名称冲突的解决方法
Apr 08 Javascript
JS动态获取当前时间,并写到特定的区域
May 03 Javascript
javascript页面加载完执行事件代码
Feb 11 Javascript
使用jQuery实现input数值增量和减量的方法
Jan 24 Javascript
利用js来实现缩略语列表、文献来源链接和快捷键列表
Dec 16 Javascript
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
May 13 jQuery
JS监控关闭浏览器操作的实例详解
Sep 12 Javascript
Element Input组件分析小结
Oct 11 Javascript
ElementUI之Message功能拓展详解
Oct 18 Javascript
JavaScript碰撞检测原理及其实现代码
Mar 12 Javascript
通过实例解析javascript Date对象属性及方法
Nov 04 Javascript
VUE前端从后台请求过来的数据进行转换数据结构操作
Nov 11 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
《OVERLORD》第四季,终于等到你!
2020/03/02 日漫
php笔记之常用文件操作
2010/10/12 PHP
自定义Laravel (monolog)日志位置,并增加请求ID的实现
2019/10/17 PHP
用函数式编程技术编写优美的 JavaScript
2006/11/25 Javascript
Javascript Jquery 遍历Json的实现代码
2010/03/31 Javascript
extjs tabpanel限制选项卡数量实现思路及代码
2013/04/02 Javascript
js 自动播放的实例代码
2013/11/19 Javascript
javascript中普通函数的使用介绍
2013/12/19 Javascript
js 异步操作回调函数如何控制执行顺序
2013/12/24 Javascript
新增加的内容是如何将div的scrollbar自动移动最下面
2014/01/02 Javascript
js验证IP及子网掩码的合法性有效性示例
2014/04/30 Javascript
JavaScript中读取和保存文件实例
2014/05/08 Javascript
jQuery中DOM树操作之复制元素的方法
2015/01/23 Javascript
谈一谈JS消息机制和事件机制的理解
2016/04/14 Javascript
js中class的点击事件没有效果的解决方法
2016/10/13 Javascript
深入理解 webpack 文件打包机制(小结)
2018/01/08 Javascript
详解create-react-app 自定义 eslint 配置
2018/06/07 Javascript
vue代理和跨域问题的解决
2018/07/18 Javascript
angularJs提交文本框数据到后台的方法
2018/10/08 Javascript
详解bootstrap-fileinput文件上传控件的亲身实践
2019/03/21 Javascript
vue登录以及权限验证相关的实现
2019/10/25 Javascript
Webpack5正式发布,有哪些新特性
2020/10/12 Javascript
Python中的rfind()方法使用详解
2015/05/19 Python
Python遍历文件夹和读写文件的实现代码
2016/08/28 Python
python中OrderedDict的使用方法详解
2017/05/05 Python
利用Python破解斗地主残局详解
2017/06/30 Python
pandas string转dataframe的方法
2018/04/11 Python
Python小工具之消耗系统指定大小内存的方法
2018/12/03 Python
大学毕业生自我鉴定
2013/11/05 职场文书
空乘英文求职信
2014/04/13 职场文书
小学节能减排倡议书
2014/05/15 职场文书
优秀党支部书记事迹材料
2014/05/29 职场文书
学生实习证明模板汇总
2014/09/25 职场文书
python 中[0]*2与0*2的区别说明
2021/05/10 Python
MySQL面试题讲解之如何设置Hash索引
2021/11/01 MySQL
「偶像大师 MILLION LIVE!」七尾百合子手办开订
2022/03/21 日漫