uni-app 安卓手机半屏播放视频可以正常拉起键盘 全屏播放视频以后 拉不起键盘了

uni-app 安卓手机半屏播放视频可以正常拉起键盘 全屏播放视频以后 拉不起键盘了

操作步骤:

  • 点击 全屏按钮,然后在退出全屏播放,textarea不会在拉起键盘

预期结果:

  • 点击 全屏按钮,然后在退出全屏播放,textarea仍然可以拉起键盘

实际结果:

  • 点击 全屏按钮,然后在退出全屏播放,textarea不会在拉起键盘

bug描述:

  • 安卓手机 半屏播放视频可以正常拉起键盘 全屏播放视频以后 拉不起键盘了
信息类别 信息内容
产品分类 uniapp/H5
PC开发环境 Windows
操作系统版本号 19042.1165
HBuilderX类型 正式
HBuilderX版本 3.1.18
浏览器平台 Chrome
浏览器版本 版本 93.0.4577.63(正式版本) (64 位)
项目创建方式 HBuilderX
App下载地址 http://81pk68921pkzone1.h5.7keya.com/pages/edu/demovideo

更多关于uni-app 安卓手机半屏播放视频可以正常拉起键盘 全屏播放视频以后 拉不起键盘了的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 安卓手机半屏播放视频可以正常拉起键盘 全屏播放视频以后 拉不起键盘了的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个在安卓平台上常见的全屏播放与输入框焦点冲突问题。当视频全屏播放时,系统会接管整个屏幕,导致WebView失去焦点控制权。退出全屏后,之前的输入框焦点状态可能无法自动恢复。

解决方案:

  1. 监听全屏状态变化 在视频组件上监听全屏状态变化事件:

    <video [@fullscreenchange](/user/fullscreenchange)="onFullscreenChange"></video>
    
    methods: {
      onFullscreenChange(e) {
        if(!e.detail.fullScreen) {
          // 退出全屏后重新获取焦点
          this.$nextTick(() => {
            this.$refs.textarea.focus()
          })
        }
      }
    }
    
  2. 使用setTimeout延迟处理 在某些机型上,退出全屏后需要短暂延迟才能重新获取焦点:

    onFullscreenChange(e) {
      if(!e.detail.fullScreen) {
        setTimeout(() => {
          this.$refs.textarea.focus()
        }, 300)
      }
    }
    
  3. 检查z-index层级 确保textarea在退出全屏后有正确的层级显示:

    .textarea-class {
      z-index: 9999;
      position: relative;
    }
    
  4. 使用uni-app的focus方法 如果使用uni-app的原生组件,确保调用正确的焦点方法:

    uni.createSelectorQuery()
      .select('#myTextarea')
      .node()
      .exec((res) => {
        res[0].node.focus()
      })
回到顶部