element-ui输入框换行符占位问题处理

dy17172026-01-13 8:34

遇到的问题是在我换行的时候，例如我第一行输入了20个字符，这是我限制的的，换行后什么都没有输入但是已经计入到了21个字符长度。这里的96个字符后就无法继续输入了，因为换行符占用导致的。

html 复制代码

  <el-input
            v-model="textarea"
            type="textarea"
            :rows="7"
            resize="none"
            placeholder="最多只能输入5行，每行最多20个汉字"
            @input="handleInputOne"
          />
          <div class="char-counter">{{ actualCharCountOne }}/{{ maxTotalLengthOne }}</div>

javascript 复制代码

 data() {
    return {
      textarea: '',
      maxLineLengthOne: 20, // 一行最多输入字符
      maxLines: 5 // 最大行数
  }
},

 computed: {
    maxTotalLengthOne() {
      return this.maxLineLengthOne * this.maxLines
    },
    // 计算实际字符数（不包括换行符）
    actualCharCountOne() {
      return this.textarea ? this.textarea.replace(/[\r\n]/g, '').length : 0
    },
  },
  methods: { 
        // 修改后的 limitText 方法
    limitText(value, maxLineLength, maxLines, fieldName, maxTotalChar = null) {
      if (!value) return

      // 统一换行符为 \n
      const normalizedValue = value.replace(/\r\n/g, '\n').replace(/\r/g, '\n')
      let lines = normalizedValue.split('\n')
      let hasChange = false

      // 限制每行字符数（不包括换行符）
      for (let i = 0; i < lines.length; i++) {
        if (lines[i].length > maxLineLength) {
          lines[i] = lines[i].substring(0, maxLineLength)
          hasChange = true
        }
      }

      // 限制最大行数
      if (lines.length > maxLines) {
        lines = lines.slice(0, maxLines)
        hasChange = true
      }

      // 限制总字符数（不包括换行符）
      if (maxTotalChar !== null) {
        let currentCharCount = 0
        const validLines = []

        for (let i = 0; i < lines.length; i++) {
          const line = lines[i]
          // 只计算实际字符数，不包括换行符
          if (currentCharCount + line.length <= maxTotalChar) {
            validLines.push(line)
            currentCharCount += line.length
          } else {
          // 如果当前行会超出限制，截取当前行
            const remainingChars = maxTotalChar - currentCharCount
            if (remainingChars > 0) {
              validLines.push(line.substring(0, remainingChars))
            }
            hasChange = true
            break
          }
        }

        if (validLines.length !== lines.length) {
          lines = validLines
          hasChange = true
        }
      }

      if (hasChange) {
        const newValue = lines.join('\n')
        if (fieldName === 'opera_step') {
          this.magneticArmData.opera_step = newValue
        } else {
          this[fieldName] = newValue
        }
      }
    },

    // 工艺补充说明的限制
    handleInputOne(value) {
      this.limitText(value, this.maxLineLengthOne, this.maxLines, 'textarea', this.maxTotalLengthOne)
    },
 }

最后实现的效果输入字符是剔除掉换行符的