SoFunction
Updated on 2025-04-11

Solution to the misalignment problem with input popup window encountered in ios12

Problem description:

Using fixed positioning pop-up windows, in the ios12 system, after the soft keyboard is adjusted, the page is moved up as a whole. When the soft keyboard disappears, the page has visually returned to its original position, but in fact the focus position of the pop-up window is still at the position when the soft keyboard is adjusted.

Solution:

This is also a solution to refer to a boss

('focusin', () => {
  // Processing of events pop-up on soft keyboard   = false
})
('focusout', () => {
  // Processing of event of soft keyboard collapse   = true
  setTimeout(() => {
    // When the focus is switched between the input boxes of the pop-up layer, it will not return to the position first    if () {
     (0, 0) // Force the page to place after losing focus    }
  }, 300)
})

Other ways to try to solve

Try not to use fix positioning, select absolute, and use() when the input is out of focus, but there are many problems that need to be solved.

  1. The input boxes of different phones are different when the soft keyboard is closed. When the Apple phone soft keyboard is closed, the input box is out of focus, but when the Xiaomi phone keyboard is closed, the input box is not out of focus.
  2. After using absolute positioning, the page will be moved up when the soft keyboard appears. When the soft keyboard disappears, the page cannot be restored to its original position.

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.