标签：code 位一 16 pos value 空格 vue var

需求：输入卡号的时候，四位一空格显示，控制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)
    },

标签：code,位一,16,pos,value,空格,vue,var
来源： https://www.cnblogs.com/myrrose/p/16408164.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。