uni-app 小程序 textarea 在华为手机分屏模式下无法聚焦输入框，一直在闪动，必现

uni-app 小程序 textarea 在华为手机分屏模式下无法聚焦输入框，一直在闪动，必现

操作步骤：

扫码 uniapp 官方的小程序 demo 也能必现！！表单组件 --> textarea，随便输入一个。 在分屏模式下一直无法唤起输入键盘，聚焦后马上又自动失焦了。 换了很多输入法，不限但包括，小艺输入法、搜狐输入法、讯飞输入法。表现都一样，无法正常输入。

预期结果：

华为分屏模式下也能在 textarea 中正常输入

实际结果：

华为分屏模式下也能在 textarea 中无法正常输入。 用原生小程序试了下textarea ，同一个机型同一个环境是无异常的，能正常输入。

bug描述：

华为分屏模式下，用 uniapp 的 textarea 无法正常输入，点击聚焦后反正又自动失焦了，可以查看演示视频。 演示demo 是从uniapp官网小程序入口扫码进入的。

5_1724903839.mp4_.zip

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

更多关于uni-app 小程序 textarea 在华为手机分屏模式下无法聚焦输入框，一直在闪动，必现的实战教程也可以访问 https://www.itying.com/category-93-b0.html

8 回复

一样的手机，实测微信官方的小程序示例，text-area有相同问题

更多关于uni-app 小程序 textarea 在华为手机分屏模式下无法聚焦输入框，一直在闪动，必现的实战教程也可以访问 https://www.itying.com/category-93-b0.html


你好，我又试了下，微信官方的确实是好的。我用的是https://developers.weixin.qq.com/miniprogram/dev/component/textarea.html 这里面的例子直接在模拟器打开预览的。下面的评论里我上传了最新的对比视频，麻烦再看下。

然后我又自己写了 demo，都是最简单的 textarea标签，手机预览的时候 uniapp 的 focus 有问题，微信官方的没问题。

华为机型如下：

最新操作视频（前面是 uniapp 的 demo，后面是原生微信小程序的官网 demo）

下午测试时微信原生和uni都也不行。刚才再试，微信原生和uni又都行了。见截图。也是华为harmony4.2.0。这个应该不是uni能控制的

uni 的话，如果是先在全屏的时候输入打开过一次键盘，再分屏去点击，这时候表现是正常的。如果是先打开分屏，直接去输入打开键盘就会出现bug（杀掉微信重新打开微信，然后马上分屏，在分屏里面打开 uni 小程序，textarea 输入）。同样的操作原生不会出现问题

针对您提到的uni-app小程序中textarea在华为手机分屏模式下无法聚焦输入框并持续闪动的问题，这通常是由于系统或框架在处理特定屏幕模式下的输入焦点时存在兼容性问题。以下是一个可能的解决方案，通过JavaScript代码手动控制textarea的焦点状态，以及尝试修复闪动问题。请注意，由于无法直接测试所有华为手机和分屏模式，以下代码仅供参考，并可能需要进一步调整以适应具体情况。

解决方案思路

  1. 监听窗口变化：检测分屏模式的变化。
  2. 手动管理焦点：在检测到分屏模式时，尝试手动设置textarea的焦点。
  3. 防抖处理：添加防抖逻辑，避免频繁操作导致的闪动。

代码示例

Page({
  data: {
    isSplitScreen: false,
    text: ''
  },
  onLoad() {
    // 监听窗口大小变化
    window.addEventListener('resize', this.handleResize);
  },
  onUnload() {
    // 移除监听
    window.removeEventListener('resize', this.handleResize);
  },
  handleResize() {
    // 判断是否进入分屏模式（具体逻辑需根据华为手机分屏特征调整）
    const isSplitScreenNow = window.innerWidth < someThreshold || window.innerHeight < someOtherThreshold;
    if (this.data.isSplitScreen !== isSplitScreenNow) {
      this.setData({ isSplitScreen: isSplitScreenNow });
      this.manageTextareaFocus();
    }
  },
  manageTextareaFocus() {
    if (this.data.isSplitScreen) {
      // 使用setTimeout和防抖处理
      this.debounceSetFocus = debounce(this.setTextareaFocus, 300);
      this.debounceSetFocus();
    }
  },
  setTextareaFocus() {
    this.$nextTick(() => {
      const textarea = this.selectComponent('#myTextarea');
      if (textarea) {
        textarea.focus();
      }
    });
  },
  // 防抖函数
  debounce(func, wait) {
    let timeout;
    return function(...args) {
      if (timeout) clearTimeout(timeout);
      timeout = setTimeout(() => func.apply(this, args), wait);
    };
  }
});

WXML

<view>
  <textarea id="myTextarea" placeholder="请输入内容" v-model="text"></textarea>
</view>

注意事项

  • 阈值设定：someThreshold和someOtherThreshold需要根据实际情况设定，以准确判断分屏模式。
  • 组件选择：确保selectComponent能正确选中textarea组件。
  • 兼容性测试：在多种设备和场景下测试代码，确保解决方案有效。

此代码示例提供了一种可能的解决方案，但由于具体问题的复杂性，可能需要根据实际情况进行进一步的调试和优化。

回到顶部