H5-input 弹起键盘遮盖输入框(Android),键盘顶不起来输入框， ios正常

最新推荐文章于 2024-05-09 09:50:03 发布

转载最新推荐文章于 2024-05-09 09:50:03 发布 · 3.3k 阅读

收录于

html5 同时被 2 个专栏收录

35 篇文章

订阅专栏

vue

19 篇文章

订阅专栏

本文介绍了一种解决H5页面在Android设备上键盘遮挡输入框的问题，通过监听窗口resize事件，使用JavaScript调整输入框位置，确保在键盘弹出时输入框始终可见。

遇到H5页面-input 弹起键盘遮盖输入框(Android),键盘顶不起来输入框，

用js的resize()方法对浏览器窗口调整大小进行计数：览器窗口的大小时，发生 resize 事件。就可以解决

window.addEventListener('resize', () => {        
      if (document.activeElement.tagName == 'INPUT') {                      
        window.setTimeout(() => { document.activeElement.scrollIntoViewIfNeeded();            
        }, 100);        
      } 
    })