部分安卓机键盘弹起导致页面空白问题

最新推荐文章于 2023-08-15 15:18:09 发布

咕噜咕噜的车轮向前

最新推荐文章于 2023-08-15 15:18:09 发布

阅读量751

点赞数

文章标签：前端 javascript

本文链接：https://blog.csdn.net/zhongmei121/article/details/128472349

版权

本文介绍了一种解决特定安卓设备（如 OnePlus 7 Pro）在应用重新获得焦点时丢失输入焦点的技术方案。通过监听页面可见性变化并触发虚拟输入事件来确保输入状态的正确恢复。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

场景：部分安卓机（例如one plus 7 pro）

解决方案：

<script>
  export default {
      data(){
        return {
          visibleChangeObject: null
        }
      },
  		mounted(){
        this.visibleChangeObject = this.visibleChange();
        this.visibleChangeObject.add();
    	},
    	beforeDestroy() {
          this.visibleChangeObject && this.visibleChangeObject.remove();
      },
      methods: {
            visibleChange() {
                const handleVisibilityChange = () => {
                    // if (document.visibilityState  == 'hidden') { //隐藏界面
                    // }
                    if (document.visibilityState  == 'visible') { //重新打开界面
                        if( isAndroid ) {
                            const currentInput = document.createElement("input");
                            document.body.appendChild(currentInput);
                            currentInput.select();
                            document.body.removeChild(currentInput);
                        }
                    }
                };
                return {
                    add: () => document.addEventListener('visibilitychange', handleVisibilityChange, false),
                    remove: () => document.removeEventListener('visibilitychange', handleVisibilityChange, false),
                };
            }
      }
  }
</script>