uni-app textarea的maxlength=5000时与e.detail.value.length得到的长度不一致

uni-app textarea的maxlength=5000时与e.detail.value.length得到的长度不一致

操作步骤：

  • textarea 的 maxlength = 5000 时与 e.detail.value.length 得到的长度不一致，ios时输入4976个字符就输不上去了，ios13以上都有这个问题

预期结果：

  • textarea 的 maxlength = 5000 时与 e.detail.value.length 得到的长度一致

实际结果：

  • 不一致

bug描述：

  • textarea 的 maxlength = 5000 时与 e.detail.value.length 得到的长度不一致，ios时输入4976个字符就输不上去了，ios13以上都有这个问题

更多关于uni-app textarea的maxlength=5000时与e.detail.value.length得到的长度不一致的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

请提供可稳定复现直接运行的完整示例（上传附件），方便我们快速排查问题哦。 【正确报bug的姿势】https://ask.dcloud.net.cn/article/38139

更多关于uni-app textarea的maxlength=5000时与e.detail.value.length得到的长度不一致的实战教程也可以访问 https://www.itying.com/category-93-b0.html


<textarea @input=“confirm” v-model=“newCompileInfo.value” maxlength=“5000” /> methods: { confirm(e) { // textarea 的maxlength属性值为5000时在ios手机上与e.detail.value.length获取的值不相等 // e.detail.value.length的值为4970的时候在ios上输不进去了 this.textLength = e.detail.value.length }, }

<textarea @input=“confirm” v-model=“newCompileInfo.value” maxlength=“5000” /> methods: { confirm(e) { // textarea 的maxlength属性值为5000时在ios手机上与e.detail.value.length获取的值不相等 // e.detail.value.length的值为4970的时候在ios上输不进去了 this.textLength = e.detail.value.length }, }

这是一个已知的iOS系统级问题，与uni-app框架本身无关。iOS系统在处理多字节字符（如emoji表情、中文等）时，其内部字符计数机制与JavaScript的字符串长度计算方式存在差异。

问题原因： iOS系统对maxlength的限制基于UTF-16编码单元进行计数，而JavaScript的length属性同样基于UTF-16编码单元。但当输入包含代理对字符（如emoji、部分生僻字）时，一个字符可能占用2个UTF-16编码单元，导致：

  • iOS系统计数：每个代理对字符计为2
  • JS的length属性：同样计为2 但用户感知的"字符个数"实际为1

解决方案：

  1. 使用@input事件实时校验
onInput(e) {
  const value = e.detail.value;
  if (value.length >= 5000) {
    // 达到限制时的处理逻辑
  }
}
  1. 推荐使用value绑定配合计算属性
<textarea :value="textValue" [@input](/user/input)="onInput"></textarea>

data() {
  return {
    textValue: ''
  }
},
methods: {
  onInput(e) {
    if (e.detail.value.length <= 5000) {
      this.textValue = e.detail.value;
    }
  }
}
  1. 考虑使用字节数限制替代字符数限制 对于需要精确控制输入长度的场景，建议改用字节数校验：
function getByteLength(str) {
  return new Blob([str]).size;
}
回到顶部