input textarea 禁止输入 非数字，特别是中文字符，光标位置保持不变 - vue2

input textarea 禁止输入 非数字，特别是中文字符，光标位置保持不变

思路：禁止输入 主要是用 keydown事件限制 不让输入即可，主要是输入中文的时候，之前没弄过。

禁止中文输入思路

由于input禁止不了中文的输入，所以改为watch value解决

1. 在 onKeyDownHandle 记录下 输入时候的光标位置 ssOld（selectionStart Old）
2. watch value的时候，看下是否是非法字符，如果是非法字符，就setSelectionRange 之前的光标位置 ssOld

完美解决。

<Input v-model="innerValue"
           :disabled="disabled"
           v-show="!divShow"
           class="nianyueInput2Class"
           :class="classes"
           ref="nianyueInput2Ref"
           type="textarea"
           :maxlength="8"
           @on-blur="inputOnBlurHandle"
           @on-keydown.tab="onkeydownTabHandle"
           @on-keydown="onKeyDownHandle"
           placeholder=""
           style="width: 100%; height: 52px;" />

watch: {
    value (val) {
      this.innerValue = val
      this.$nextTick(() => {
        this.innerValue = clearSpot(val)
        this.$nextTick(() => {
          if (clearSpot(val) !== val) { // 有非法字符的时候 恢复光标
            this.$refs.nianyueInput2Ref.$refs.textarea.setSelectionRange(this.ssOld, this.ssOld)
          }
        })

        console.info('this.innerValue -- ', this.innerValue)
      })
    },
    innerValue (val) {
      console.info('watch NianyueInput2 innerValue', val)

      this.$emit('input', val)
    }
  },

onKeyDownHandle (event) {
      this.ssOld = this.$refs.nianyueInput2Ref.$refs.textarea.selectionStart
      console.info('this.ssOld', this.ssOld)
      onKeyDownHandle(event)
    },

其他函数

export const clearSpot = dateStr => {
  // return dateStr.replace(/[&\|\\\*^%$#@\-.]/g, '')
  return dateStr.replace(/[^0-9]/ig, "")
}

export const onKeyDownHandle = (event) => {
  // 只允许输入纯数字
  console.info('onKeyDownHandle event.keyCode', event.keyCode)
  // const allowedCharacters
  const k = event.keyCode
  if ((k >= 48 && k <= 57) || (k >= 96 && k <= 105) || k === 8 || k === 46 || k === 9 || k === 37 || k === 39) {
    // 允许输入
  } else {
    event.returnValue = false
  }
}

---------------------------------------------
生活的意义并不是与他人争高下，而在于享受努力实现目标的过程，结果是对自己行动的嘉奖。
↑面的话，越看越不痛快，应该这么说：

生活的意义就是你自己知道你要做什么，明确目标。没有目标，后面都是瞎扯！

新博客 ​​​https://www.VuejsDev.com​​ 用于梳理知识点