文本框输入控制

需求：只能输入0-100个字符，超出给提示，

重点：使用字符串截取，但是在中间部分，插入时需要做额外的处理

移动端使用vant处理

<van-field type="textarea" maxlength="101" ref="myTextArea" v-model="fieldInput" placeholder="请输入您的意见，意见长度不超过100字符" rows="8" border @input="handleInput" get-container="body" safe-area-inset-bottom/>
  
    // 输入意见反馈事件
    handleInput (val) {
      let textarea = this.$refs.myTextArea.$el.querySelector('textarea')
      // 当前文本框内容
      // 如果当前文本框内容长度大于100
      if (val.length > 100) {
        // 显示验证信息
        this.$toast('可输入文字不能超过100个字符！')
        // 检查光标位置
        let startPos = textarea.selectionStart
        // 如果光标在末尾
        if (startPos === val.length) {
          // 截取前100个字符
          let newText = val.substring(0, 100)
          // 更新数据
          this.fieldInput = newText
        } else {
          // 光标不在末尾时，恢复到之前的文本内容
          let partBefore = val.substring(0, startPos - 1) // 从开头到指定位置的子串
          let partAfter = val.substring(startPos) // 从指定位置到末尾的子串
          val = partBefore + partAfter
          this.fieldInput = val
		
          this.$nextTick(() => {
            textarea.selectionStart = partBefore.length
            textarea.selectionEnd = partBefore.length
          })
          如果是el-input输入框使用异步加载
               setTimeout(()=>{
            input.setSelectionRange(partBefore.length, partBefore.length);
          },0)
        }
      } else {
        // 如果未超过100个字符，更新数据到当前输入框内容
        this.fieldInput = val
      }
    },

pc端使用原生textarea标签

<textarea placeholder="请输入您的意见，意见长度不超过100字符" v-if="item.isShowTextarea" class="question_content" rows="5" v-model="item.adviceSuggest" maxlength="101" @input="handleInputTextarea($event,item,index)">
                </textarea>
 handleInputTextarea (e, item, index) {
      let textarea = e.target
      // 当前文本框内容
      let currentValue = textarea.value
      // 如果当前文本框内容长度大于100
      if (currentValue.length > 100) {
        // 显示验证信息
        this.validateText = '可输入文字不能超过100个字符！'
        this.isShowValidate = true
        // 检查光标位置
        let startPos = textarea.selectionStart
        // 如果光标在末尾
        if (startPos === currentValue.length) {
          // 截取前100个字符
          let newText = currentValue.substring(0, 100)
          // 更新数据
          this.$set(this.questionList[index], 'adviceSuggest', newText)
        } else {
          // 光标不在末尾时，恢复到之前的文本内容
          let partBefore = textarea.value.substring(0, startPos - 1) // 从开头到指定位置的子串
          let partAfter = textarea.value.substring(startPos) // 从指定位置到末尾的子串
          textarea.value = partBefore + partAfter
          textarea.setSelectionRange(partBefore.length, partBefore.length) // 设置光标位置
          this.$set(this.questionList[index], 'adviceSuggest', textarea.value)
        }
      } else {
        // 如果未超过100个字符，更新数据到当前输入框内容
        this.$set(this.questionList[index], 'adviceSuggest', currentValue)
      }
    },