Virtual keyboard Impact mobile Fixed Layout solution

When doing mobile business development, you will encounter the fixed element and the input box in the same situation. In the case of the phone's soft keyboard, it will cause the original fixed positioning elements to follow the soft keyboard and floating, the overall layout caused impact. To see such a chestnut intuitively feel this bug.

Problem Description:

Develop a gem transfer page, as expected.

The red rectangular area is the contents of the fixed layout with the CSS code {width:100%;p osition:fixed;bottom:0;left:0}, which does not seem to matter, but when the phone keypad evokes input, The red rectangular region follows the soft keyboard and floats, and this is the case:

The bottom of the rule bar with the keyboard floating, although still maintained at the bottom of the screen, but seriously affected the user experience, but also inconvenient to enter. After consulting the data, it is found that isscroll.js can solve the problems caused by fixed positioning, but introducing third-party libraries for a single page is obviously not conducive to improving the performance of the page. Simplify implementation by not relying on third-party libraries as much as possible.

Solution Ideas:

① do not use fixed layout, it is necessary to use margin and so on to adjust the position, but this will cause and other Brothers page face page style inconsistent, the site of each page changes will inevitably increase a lot of work.

② use Z-index to solve this problem, set the bottom of the Z-index value is less than the Z-index value of the upper part, so even if the float will be covered by the upper part, but also cause problems: although the bottom area can be seen visually but will be covered, can not click to interact, in this case, Can't see the business rules, and can not download the app.

The ③ input box is monitored, and once the focus is taken, the fixed property of the bottom area is removed and the fixed property is restored without focus. However, one of the key questions is that the focus of the text box may not pop up the keyboard!!! We think it may not work when the keyboard appears or disappears!!!

Solution: After repeated experiments, combined with ideas ② and ideas ③, put forward the input frame Focus monitoring combination set Z-index value scheme perfect solution to this bug.

To see the main steps, set the bottom area to the fixed layout, and set the Z-index value of the bottom rectangular area equal to the Z-index value of the upper part.

When the input box gets the focus (regardless of whether the keyboard pops up), the Z-index value of the bottom rectangular area is less than the Z-index value of the upper part;

When the input box loses focus, the z-index values of the two parts are restored in unison to ensure that the bottom area can be clicked.

This setting does not affect the overall layout and user experience of the page, regardless of whether the keyboard pops up, and when the user has lost focus while clicking on other hyperlink behaviors within the page, this ensures that all areas can be clicked for interaction.

// The input box gets the focus event $ ("#input_id1, #input_id2"). Focus (function  (    ) {//todo }); // The input box loses focus event $ ("#input_id1, #input_id2"). blur (function  ()    {//  Todo});

After fixing the bug

Virtual keyboard Impact mobile Fixed Layout solution