如何实现vue输入电话号码自动按3-4-4分割功能
这篇文章主要讲解了如何实现vue输入电话号码自动按3-4-4分割功能,内容清晰明了,对此有兴趣的小伙伴可以学习一下,相信大家阅读完之后会有帮助。
从网站建设到定制行业解决方案,为提供做网站、成都网站制作服务体系,各种行业企业客户提供网站建设解决方案,助力业务快速发展。创新互联将不断加快创新步伐,提供优质的建站服务。
输入框绑定
监听事件,每次号码发生改变时触发
大体的逻辑是:先比较号码变化前后的长度,判断是输入还是删除,如果是输入的话,利用正则表达式改变号码格式。
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手机号按344分隔,银行卡号每4位空格分隔
实现效果:
1. 手机号输入/粘贴时,不允许输入数字外的其它字符,按344分隔,最大输入11位数字
2. 银行卡号输入/粘贴时,不允许输入数字外的其它字符,每四位用空格分隔
代码:
手机号:
银行卡号:
js:
上述方案即可实现基本效果,但如果从中间开始删除或添加内容时,光标会自动跑到最后,如下:
若想光标留在删除/添加内容位置,需要设置光标位置:
修改js如下:
看完上述内容,是不是对如何实现vue输入电话号码自动按3-4-4分割功能有进一步的了解,如果还想学习更多内容,欢迎关注创新互联行业资讯频道。
文章标题:如何实现vue输入电话号码自动按3-4-4分割功能
文章转载:http://scyanting.com/article/jsjoco.html