uni-app 在打包成 H5 之后 input 和 textarea 总是在输入的过程中自动失焦

uni-app 在打包成 H5 之后 input 和 textarea 总是在输入的过程中自动失焦

示例代码：

<input v-model="title" placeholder="请输入日记标题..." class="title-text" />  
<textarea v-model="content" maxlength="-1" placeholder="写下内容..." class="textarea" auto-height />

操作步骤：

  1. 添加上面代码示例
  2. 将其打包为H5，并放到服务端运行测试

预期结果：

正常输入不会失焦

实际结果：

输入过程中会经常失焦

bug描述：

使用上面两个组件（其他表单组件没有试），在使用HBuilderX打包成H5平台之后，在输入的过程中总是自动失去焦点，但直接在HBuilderX上运行时貌似没有这个问题。


更多关于uni-app 在打包成 H5 之后 input 和 textarea 总是在输入的过程中自动失焦的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

提供 vue 版本，提供一个在线示例，我测试一下

更多关于uni-app 在打包成 H5 之后 input 和 textarea 总是在输入的过程中自动失焦的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个在 uni-app 打包 H5 时常见的性能优化问题。当页面组件较多或渲染逻辑复杂时，Vue 的响应式更新会导致组件重新渲染，从而引起 input 和 textarea 失焦。

解决方案：

  1. 使用 v-model.lazy 将 v-model 改为 v-model.lazy，延迟数据同步，减少输入时的频繁更新：
    <input v-model.lazy="title" placeholder="请输入日记标题..." class="title-text" />
回到顶部