Click the text box moving end pop-up keyboard to solve access

When we do h5, we often encounter situations keyboard pop-up blocking text box, this distinction IOS and Android,

In the IOS, IOS will automatically shift the keyboard pop-up text boxes, text boxes to avoid being blocked by the keyboard, but the keyboard when stowed in vue will lead to pages stuck, this time we can use

document.body.scrollIntoView (false) to manually make the page re-rendering, because the IOS Fold the keyboard will trigger blur event the parties of the text box, so we can add the event to the text box.

 

In Andrews, the case keyboard to the text box blocking usually occurs, we can monitor focus event of the text box when the text box focus event triggers: move the text box to the interface at the top half of the position, and because closed at Andrews in it will not be triggered from the keyboard blur, but will trigger a resize event, so we need to determine whether the keyboard is stowed in the resize event, and if the parties will move the text box to its original position, if only to move here location text box, could lead to ugly interface, the best solution is to move the entire interface, so we might as well move to move the entire body, then put away the body restored when the keyboard.

Guess you like

Origin www.cnblogs.com/mrzhu/p/11482162.html