解决手机端键盘抬起底部fiexd跟着一起抬起，解决ios收起键盘底部有白色背景，取消ios点击出现黑色背景

最新推荐文章于 2022-10-12 17:56:18 发布

原创最新推荐文章于 2022-10-12 17:56:18 发布 · 551 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#手机端键盘抬起 #ios底部出现白色背景 #底部被顶到键盘上面

vue 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种在Web应用中监听软键盘弹起和收起的事件处理方法，通过JavaScript实现对软键盘状态的监测，并针对iOS设备进行了特别优化，解决了键盘收起后底部出现空白及点击元素高亮的问题。

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

 document.body.addEventListener('focusin', (e) => {  //软键盘弹起事件
        if(e.target.type != 'file'){
            //隐藏底部div
            // document.getElementById('mybottom').style.display = "none"
        }
      })
       document.body.addEventListener('focusout', () => {  //软键盘收起事件
             //显示底部div
            // document.getElementById('mybottom').style.display = "block"
           if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
            //软键盘收起的事件处理解决ios收起键盘底部有白色背景
            setTimeout(() => {
              const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0
              window.scrollTo(0, Math.max(scrollHeight - 1, 0))
            }, 100)
          }
      })```
      
  /* 取消ios点击出现黑色背景 */
div{-webkit-tap-highlight-color:rgba(0,0,0,0);}