textarea 安卓 文本框内一直按“删除键”删除,会卡

bug情况:

https://aliossdl3.tower.im/652017/55a3f503c2538c8c7df9e7a084368d3f?Expires=1636338453&OSSAccessKeyId=LTAI4FzdzJ63WYH36wjrvT56&Signature=%2F4sdZKGdG8e690IPP%2Ba%2BelA1Tbc%3D&response-content-disposition=inline%3Bfilename%3D%22tmp_3559dc555c289f259bbce1992609df370e5d137598899f6f.mp4%22&response-content-type=video%2Fmp4

可以看到,长按删除按钮,文本框在闪烁

原因是

textInputAction 方法里面频繁调用  setData,页面会重复渲染
复制代码
textInputAction: function (e) {
    var text = e.detail.value;
    var textLen = util.fnGetCpmisWords(text)

    var submitBtnActive = false
    if (this.data.type == 1 && textLen > 0) {
      submitBtnActive = true
    } else if (this.data.type == 2 && textLen > 0 && this.data.customTitle.length > 0) {
      submitBtnActive = true
    }
    // this.data.inputText = text
    this.setData({
      currentTextLength: textLen,
      inputText: text,
      sbActiveState: submitBtnActive,
      submitBtnText: text == this.data.tempRecogText ? '请编辑识别后的文本再提交' :'提交作文'
    })
  },
复制代码

改成    this.data.inputText = text, 别在setData里面更新inputText    就好了:

复制代码
textInputAction: function (e) {
    var text = e.detail.value;
    var textLen = util.fnGetCpmisWords(text)

    var submitBtnActive = false
    if (this.data.type == 1 && textLen > 0) {
      submitBtnActive = true
    } else if (this.data.type == 2 && textLen > 0 && this.data.customTitle.length > 0) {
      submitBtnActive = true
    }
    this.data.inputText = text
    this.setData({
      currentTextLength: textLen,
      // inputText: text,
      sbActiveState: submitBtnActive,
      submitBtnText: text == this.data.tempRecogText ? '请编辑识别后的文本再提交' :'提交作文'
    })
  },
复制代码

 补充wxml:

<textarea class='mTextArea' auto-height='{{true}}' maxlength='-1' value='{{inputText}}' bindinput='textInputAction'
      placeholder="{{sData.my_writing.hint}}" placeholder-class="tiClass" hidden="{{showSuccessCover}}"
      cursor-spacing='90'></textarea>

 

 

posted on   土匪7  阅读(313)  评论(0编辑  收藏  举报

编辑推荐:
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 三行代码完成国际化适配,妙~啊~
· .NET Core 中如何实现缓存的预热?
历史上的今天:
2016-11-08 GCD死锁 多线程
< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

统计

点击右上角即可分享
微信分享提示