js|虚拟键盘挡住input标签，fixed元素

转载于 2017-10-27 14:03:54 发布 · 1.3k 阅读

Android 同时被 2 个专栏收录

483 篇文章

订阅专栏

JavaScript

52 篇文章

订阅专栏

本文介绍了一种解决Android 4-6版本设备上虚拟键盘弹出时遮挡输入框的方法。通过监听窗口大小变化并调整当前焦点元素的位置来避免遮挡。此外，还提供了一个针对底部固定元素的解决方案，确保其在键盘弹出时隐藏，键盘收回时重新显示。

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

转自：http://blog.youkuaiyun.com/dengboblog/article/details/52605416?locationNum=4&fps=1

js|虚拟键盘挡住input标签

[javascript]view plain copy 
   
 if(/Android [4-6]/.test(navigator.appVersion)) {  
     window.addEventListener("resize", function() {  
         if(document.activeElement.tagName=="INPUT" || document.activeElement.tagName=="TEXTAREA") {  
             // alert(1);  
              window.setTimeout(function() {  
                  document.activeElement.scrollIntoViewIfNeeded();     
              },0);  
         }  
      })  
  }  

不过底部有个fixed 元素

[javascript]view plain copy 
   
 //虚拟键盘出现  底部dom元素隐藏  
  document.write( '<style>.float-bottom{visibility:hidden}@media(min-height:' + ($( window ).height() - 10) + 'px){.float-bottom{visibility:visible}}</style>' );  