uni-app video标签和input标签在同一页面下，视频切换全屏后返回input点击聚焦无法弹起键盘

在 uni-app 中，当 video 标签和 input 标签在同一页面时，视频切换全屏后返回页面，input 点击聚焦无法弹起键盘的问题，通常是由于全屏视频播放时，页面的焦点管理出现问题导致的。以下是一些可能的解决方案：

1. 使用 focus 方法手动触发键盘

在 input 的 @focus 事件中，手动调用 input 的 focus 方法，确保键盘能够弹起。

<template>
  <view>
    <video id="myVideo" src="your-video-url" controls></video>
    <input type="text" @focus="handleFocus" />
  </view>
</template>

<script>
export default {
  methods: {
    handleFocus(event) {
      // 手动触发 input 的 focus 事件
      event.target.focus();
    }
  }
}
</script>

2. 监听视频全屏状态变化

通过监听视频的全屏状态变化，在全屏退出时手动触发 input 的 focus 方法。

<template>
  <view>
    <video id="myVideo" src="your-video-url" controls @fullscreenchange="handleFullscreenChange"></video>
    <input type="text" ref="myInput" />
  </view>
</template>

<script>
export default {
  methods: {
    handleFullscreenChange(event) {
      if (!event.detail.fullScreen) {
        // 视频退出全屏时，手动触发 input 的 focus 事件
        this.$refs.myInput.focus();
      }
    }
  }
}
</script>

3. 使用 setTimeout 延迟触发 focus

有时候，焦点管理的问题可能是由于事件触发的时机问题。可以使用 setTimeout 延迟触发 input 的 focus 方法。

<template>
  <view>
    <video id="myVideo" src="your-video-url" controls @fullscreenchange="handleFullscreenChange"></video>
    <input type="text" ref="myInput" />
  </view>
</template>

<script>
export default {
  methods: {
    handleFullscreenChange(event) {
      if (!event.detail.fullScreen) {
        // 延迟 100ms 触发 input 的 focus 事件
        setTimeout(() => {
          this.$refs.myInput.focus();
        }, 100);
      }
    }
  }
}
</script>

4. 使用 uni-app 的 focus API

uni-app 提供了 uni.createSelectorQuery() 方法，可以通过选择器获取 input 元素并手动触发 focus。

<template>
  <view>
    <video id="myVideo" src="your-video-url" controls @fullscreenchange="handleFullscreenChange"></video>
    <input type="text" id="myInput" />
  </view>
</template>

<script>
export default {
  methods: {
    handleFullscreenChange(event) {
      if (!event.detail.fullScreen) {
        // 使用 uni-app 的 API 获取 input 元素并触发 focus
        uni.createSelectorQuery().select('#myInput').node((res) => {
          if (res && res.node) {
            res.node.focus();
          }
        }).exec();
      }
    }
  }
}
</script>

5. 检查 input 的 readonly 属性

确保 input 的 readonly 属性没有被设置为 true，否则即使聚焦也无法弹起键盘。

<input type="text" readonly="false" />

6. 检查 input 的 disabled 属性

确保 input 的 disabled 属性没有被设置为 true，否则无法聚焦。

<input type="text" disabled="false" />

7. 检查 input 的 focus 事件是否被阻止

确保 input 的 focus 事件没有被其他代码阻止或覆盖。

8. 使用 uni-app 的 focus 方法

uni-app 提供了 uni.pageScrollTo 方法，可以通过滚动页面来触发 input 的 focus 事件。

<template>
  <view>
    <video id="myVideo" src="your-video-url" controls @fullscreenchange="handleFullscreenChange"></video>
    <input type="text" id="myInput" />
  </view>
</template>

<script>
export default {
  methods: {
    handleFullscreenChange(event) {
      if (!event.detail.fullScreen) {
        // 使用 uni-app 的 API 滚动页面并触发 input 的 focus 事件
        uni.pageScrollTo({
          selector: '#myInput',
          success: () => {
            uni.createSelectorQuery().select('#myInput').node((res) => {
              if (res && res.node) {
                res.node.focus();
              }
            }).exec();
          }
        });
      }
    }
  }
}
</script>