vue 输入框输入4位一空格,控制16位有效字符
需求:输入卡号的时候,四位一空格显示,控制16位有效字符
实现过程
<input type="tel" v-model="code" ref="code" @input="cardCount(e)" placeholder="请输入" />
解决方法如下:
cardCount() { // 获取当前光标的位置 var caret =this.$refs.code.selectionEnd // 从左边沿到坐标之间的空格数 var sp = (this.code.slice(0, caret).match(/\s/g) || []).length // 去掉所有空格 var nospace = this.code.replace(/\s/g, '') // 重新插入空格 this.code= nospace.replace(/\D+/g, '').replace(/(\d{4})/g, '$1 ').trim() // 从左边沿到原坐标之间的空格数 var curSp = (this.code.slice(0, caret).match(/\s/g) || []).length // 修正光标位置 var selectionEnd = caret + curSp - sp setTimeout(() => { this.$refs.code.setSelectionRange(selectionEnd, selectionEnd) }, 0) }
原实现方法:缺点删除一位会错位
cardCount(e) { // 获取光标 var pos = e.target.selectionStart // 获取到输入后的结果 var value = this.code.replace(/\D/g, '') // 正则表达式:如果输入框中输入的不是数字或者空格,将不会显示; // 将结果去掉空格 value = removeSpace(value) // 光标做判断 if ((this.keyCode && this.keyCode == 8) || (e.inputType && e.inputType == 'deleteContentBackward')) { if (value.length % 4 == 0) { pos = pos - 1 } } else { if (pos % 4 == parseInt(pos / 4)) { pos = pos + 1 } } // 判断长度如果大于16位,截取前16位 if (value.length > 16) { value = value.substring(0, 16) } // 将结果加入空格返回 var newValue = addSpace(value) this.code= newValue // 移除空格 function removeSpace(old) { return old.replace(/\s/g, '') } // 每4位添加空格 function addSpace(old) { return old.replace(/(\d{4})(?=\d)/g, '$1 ').trim() } // 设置光标 setTimeout(() => { // this.$refs.redeem.focus(); this.$refs.code.setSelectionRange(pos, pos) }, 0) },
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步