uni-app textarea设置自适应高度 撑开后再手动设置值为空 高度没有还原

uni-app textarea设置自适应高度 撑开后再手动设置值为空 高度没有还原

开发环境 版本号 项目创建方式
Windows window11 HBuilderX 
### 示例代码：

```html
<textarea v-if="!showEmojiInput || !viewVisible" :focus="isFocus" class="qx-input-content"  
        v-model="inputText" cursor-spacing="20" :adjust-position="false" @blur="handleInputBlur"  
        @input="handleInput" @focus="handleInputFocus" id="msg-input" auto-height confirm-type="send"  
        :confirm-hold="true" @confirm="handleSendTextMsg" :show-confirm-bar="false"  
        :maxlength="-1"></textarea>

操作步骤：

  • 输入内容直到textarea换行 textarea高度会自动撑开
  • 然后手动清空inputText的值 textarea的高度扔保持撑开

预期结果：

  • textarea的高度还原为一行的高度

实际结果：

  • textarea的高度扔保持撑开

bug描述：

  • 输入内容直到textarea换行 textarea高度会自动撑开
  • 然后手动清空inputText的值 textarea的高度扔保持撑开

更多关于uni-app textarea设置自适应高度 撑开后再手动设置值为空 高度没有还原的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

试试原生微信小程序有无此问题

更多关于uni-app textarea设置自适应高度 撑开后再手动设置值为空 高度没有还原的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个常见的 uni-app textarea 组件问题。当 textarea 使用 auto-height 属性实现自适应高度后，手动清空内容时高度不会自动还原。

解决方案：

  1. 使用动态 key 强制重新渲染
<textarea :key="textareaKey" ...></textarea>

在清空内容时同时更新 key 值：

this.inputText = ''
this.textareaKey = Date.now() // 强制重新渲染
  1. 通过 ref 操作样式（H5平台）
// 清空时重置高度
this.inputText = ''
this.$nextTick(() => {
  const textarea = this.$refs.textarea
  if (textarea) {
    textarea.style.height = 'auto'
  }
})
  1. 条件渲染结合动态 key（推荐）
<textarea v-if="showTextarea" :key="textareaKey" ...></textarea>

clearInput() {
  this.inputText = ''
  this.showTextarea = false
  this.$nextTick(() => {
    this.showTextarea = true
    this.textareaKey = Date.now()
  })
}
回到顶部