undefinedfix
Sign in

When the iPhone browser fills in the form, the position: absolute page is pushed up and down

LoNgTuRd edited in Wed, 03 Aug 2022

When the iPhone browser fills in the form, the position: absolute page is pushed up and can't get down

When you click the form, the page is pushed up by the virtual keyboard. When you put away the virtual keyboard, the page can't go down. There is no problem with the test on Android phones.

thank you

3 Replies
Shraft
commented on Wed, 03 Aug 2022
const u = navigator.userAgent
const isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) //ios终端
window.onload = function() {
  const inputs = document.getElementsByTagName('input')

  for (let i = 0; i < inputs.length; i++) {
    inputs[i].addEventListener('blur', function() {
      if (isIOS) {
        blurAdjust()
      }
    })
  }
}
// 解决苹果不回弹页面
function blurAdjust(e) {
  if (document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'TEXTAREA') {
    return
  }
  if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
    //判断iPhone|iPad|iPod|iOS
    document.activeElement.scrollIntoViewIfNeeded(true)
  }
}
user282
commented on Wed, 03 Aug 2022

Absolute top:xxx still bottom:xxx

Azathoth_B
commented on Thu, 04 Aug 2022

Call the apiscrollintoview when the input box is focused