javascript - How to fix the input box of a mobile web page to the bottom?

Question

As shown in the picture above, when the user clicks on the input box on the homepage, the keyboard pops up, and sometimes the input box is partially blocked (as shown below)

The current processing method is to execute resize

after the input box gains focus.

$('input').on('focus' , function(){
    $(window).resize();
}).on('blur' , function() {
    $(window).resize();
});

The purpose of this is to reset the window size and reposition the input box that originally floated at the bottom
But the effect is not very good, sometimes it takes effect and sometimes it fails

What method should be used to better handle this problem?
Also, while the keyboard pops up, scrolling the page can also keep the input area fixed at the bottom

The current positioning method of the input box is: position:fixed
Screenshot environment: ios WeChat

Answer 1

Input box, you can use flex to fix it to the bottom. To fix flex to the bottom, you can check sticky-footer

Answer 2

It is recommended that you use js to calculate and use window.innerHeight

Answer 3

http://www.cnblogs.com/cococe...
Try this

Answer 4

The person above is right, you can use flex. Those who advertise use this attribute. I think this can solve your problem

Answer 5

Address: http://www.haorooms.com/post/...
Principle: Don’t use fixed on ios, use absolute instead.
End.