uni-app textarea在微信小程序安卓真机上会超出maxlength的长度限制

uni-app textarea在微信小程序安卓真机上会超出maxlength的长度限制

项目信息 详细信息
产品分类 uniapp/小程序/微信
PC开发环境 Windows
操作系统版本 1703
HBuilderX类型 正式
HBuilderX版本 3.1.13
工具版本 1.05.2105170
基础库版本 2.17.0
项目创建方式 HBuilderX

操作步骤：

在maxlength限制为6的输入框中输入7次，双向绑定的变量content会暂时7次输入的结果，输入框中则展示content字符串的前6位。

预期结果：

双向绑定变量结果和输入框展示的内容一致。

实际结果：

双向绑定变量会多接收一次输入。

bug描述：

微信小程序安卓真机上，textarea输入框输入到达设置的maxlength上限后还能在接收一次输入，输入框内容显示正常，双向绑定的变量长度会超出maxlength上限。微信开发者工具和ios真机上无此问题。

下载demo


更多关于uni-app textarea在微信小程序安卓真机上会超出maxlength的长度限制的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

找到一个临时解决方案，在pages.json中加入
“globalStyle”: {
“renderingMode”: “seperated”
} renderingMode: “seperated” 可以关闭同层（这个会关闭所有组件的同层，如果有组件希望同层可以再配置mixedRenderComponents: [“video”] 给特定组件开启同层）

更多关于uni-app textarea在微信小程序安卓真机上会超出maxlength的长度限制的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的微信小程序安卓平台特定bug。在安卓真机上，textarea组件在达到maxlength限制后，仍会触发一次input事件，导致v-model绑定的变量超出长度限制。

临时解决方案：

  1. 手动处理输入内容：
onInput(e) {
  if (e.detail.value.length > this.maxlength) {
    this.content = e.detail.value.slice(0, this.maxlength)
  } else {
    this.content = e.detail.value
  }
}
  1. 使用computed属性：
computed: {
  computedContent: {
    get() {
      return this.content
    },
    set(val) {
      if (val.length > this.maxlength) {
        this.content = val.slice(0, this.maxlength)
      } else {
        this.content = val
      }
    }
  }
}
  1. 监听blur事件：
onBlur() {
  if (this.content.length > this.maxlength) {
    this.content = this.content.slice(0, this.maxlength)
  }
}
回到顶部