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

本文介绍了一种在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);}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值