How to deal with the problem of dislocation with input pop-up window in ios12

This article mainly introduces how to deal with ios12 encountered with input pop-up window dislocation problem, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let Xiaobian take you to understand.

Problem description:

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

Solution:

This is also a reference to the solution of some big guy.

Document.body.addEventListener ('focusin', () = > event handling for pop-up this.isReset = false}) document.body.addEventListener (' focusout', () = > {/ / event handling for soft keyboard folded this.isReset = true setTimeout () = > {/ / if (this.isReset) {window.scroll (0)) when the focus is switched between the input boxes of the pop-up layer 0) / / force the page to be repositioned after out of focus}, 300)})

Try other ways to solve it

Try not to use fix positioning, select absolute, judge input out of focus, use window.scroll (), but there are many problems that need to be solved.

The input boxes of different phones are different when the soft keyboard is put away. When the iPhone soft keyboard is put away, the input box is out of focus, but when the Xiaomi phone keyboard is folded, the input box is not out of focus. After using absolute positioning, the page of the soft keyboard will move up, and when the soft keyboard disappears, the page cannot be restored to its original position.

Thank you for reading this article carefully. I hope the article "how to deal with the dislocation problem with input pop-up window in ios12" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!