仅允许修改输入框括号中内容

仅允许修改输入框括号中内容

这个 demo 是看了 https://juejin.cn/post/7024106183153680391 这个文章之后做出来的。

基本思路是在 change 事件中，取出输入前、输入后的两个文本，比较他们的括号外的文本是不是相等，相等则允许更改旧值。

后面使用自定义光标位置解决在括号外输入时会显示在最后的问题。

不过经测试，当同时按下两个键时此问题还是会存在。

<template>
  <el-input
    ref="ipt"
    :value="inputValue"
    @input="inputValueFn"
  />
</template>
<script>
export default {
  data() {
    return {
      inputValue: `今日信息: 娱乐新闻(XX)条, 体育新闻(XX)条`,
    }
  },
  methods: {
    // 设置焦点
    setFocus (textbox, index) {
      if (textbox.createTextRange) {
        var r = textbox.createTextRange();
        r.collapse(true);
        r.moveStart('character', index);
        r.select()
      } else if (textbox.setSelectionRange) {
        textbox.focus();
        textbox.setSelectionRange(index, index);
      }
    },
    // 找到索引
    findIndex (newVal, oldVal) {
      let newValArr = newVal.split('')
      let oldValArr = oldVal.split('')
      for (let i = 1; i <= newVal.length; i++) {
        let newItem = newValArr.slice(0, i)
        let oldItem = oldValArr.slice(0, i)
        if (JSON.stringify(newItem) !== JSON.stringify(oldItem)) {
          return i
        }
      }
      return newVal.length
    },
    // input 值变更的回调
    inputValueFn(inputVal = ``) {
      let val = this.inputValue
      // inputVal 用户输入的内容
      // val 目前页面显示的内容(输入之前的内容)
      let reg = /([wW]*?)|（[wW]*?）/g // 兼容中英文两种括号
      let input = inputVal.replace(reg, '') // 去掉现在在输入的内容括号里边的空格
      let value = val && val.replace(reg, '') // 去掉括号里边原来的内容的空格
      if (input === value) { // 比对去掉空格内容后，是否一致，如果是一致的话，则说明没有修改空格以外的内容,则让用户修改
        this.inputValue = inputVal // 数据更新成用户输入的内容
      } else {
        // 如果用户没有在小括号内输入的时候，比对字符串，并设置焦点的主逻辑
        let index = this.findIndex(inputVal, val)
        let dom = this.$refs.ipt.$el.querySelector(`input`)
        if (dom && (index || index === 0)) {
          // 由于
          setTimeout(() => {
            this.setFocus(dom, index - 1)
          }, 10)
        }
      }
    },
  },
}
</script>

​