【uniapp】textarea maxlength字数计算不准确的问题

科科是我嗷~2025-03-12 23:12

背景

一个非常常见的功能，多行文本输入框内增加maxlength最大字数限制500字。但是当我们多行输入并且有换行时，比如到493字时却无论如何输入不了。是因为maxlength计算时，把换行也计算进去了，并且换行符 \n 被计算为 2 个字符textarea 可能会将换行符 \n 计算为2个字符，导致字数限制比预期更早达到上限。

解决办法

监听 input 事件，手动计算实际字符数

你可以使用 @input 监听输入事件，手动去掉换行符和特殊字符之后再计算长度，确保用户可以真正输入 500 个字符。

javascript 复制代码

<template>
  <textarea 
    v-model="text" 
    :maxlength="500" 
    @input="handleInput"
    placeholder="请输入内容"
  ></textarea>
  <p>{{ text.length }}/500</p>
</template>

<script>
export default {
  data() {
    return {
      text: ""
    };
  },
  methods: {
    handleInput(event) {
      let value = event.detail.value;
      // 处理换行符问题，确保换行符不多计算
      value = value.replace(/\r\n/g, "\n"); // 统一换行符
      value = value.replace(/\n/g, " "); // 换行符改为空格，不占字符

      if (value.length > 500) {
        this.text = value.substring(0, 500);
      } else {
        this.text = value;
      }
    }
  }
};
</script>

完美解决~~