解决ios中input获取焦点,弹出输入法之后,input被遮挡的问题

在ios中会出现这样的问题,当然手机端不会,在iPad端就会有这样的情况,开发中会遇到这样的问题,输入框在获取焦点后,键盘弹出会遮挡输入框,怎么解决问题呢?
1、iPad键盘是可以启用悬浮的,这样随便你怎么操作也不会出现遮挡输入框的问题;
2、可以采用全局获取输入框,对数据框获取焦点进行监听,获取焦点后可以将输入框滚动到可视区域,可以使用scrollIntoView方法,方法使用可参照以下链接文档:https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
解决方案如下:

// 获取焦点方法
function handleFocus(ev) {
  if (ev.target.tagName === 'INPUT') {
    document.body.style.paddingBottom = '40vh'
    setTimeout(() => {
      ev.target.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
    }, 0)
  }
}
// 失去焦点方法
function handleBlur() {
  setTimeout(() => {
    if (document.activeElement.tagName !== 'INPUT') {
      document.body.style.paddingBottom = '0'
    }
  })
}
// 全局监听
document.documentElement.addEventListener('focus', handleFocus, true)
document.documentElement.addEventListener('blur', handleBlur, true)
onUnmounted(() => {
  document.documentElement.removeEventListener('focus', handleFocus, true)
  document.documentElement.removeEventListener('blur', handleBlur, true)
})
// 滚动页面将所以输入框失去焦点
document.body.addEventListener('touchmove', () => {
  document.activeElement.blur()
  handleBlur()
})
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值