Android input box is blocked by virtual keyboard (micro-credit development) _android

First through a page to see the ins and outs of things, the page looks like this:

This page is just a screen size, so there is no scroll bar, because the "save" key above the item note is required to fill out, when he clicked will appear virtual keyboard, but the Android phone pop-up keyboard will cover the input box, so that users can not see. Apple mobile phone is not natural, oh, the keyboard of the iphone is taken up to occupy the following position, so that the page pushed up, the entire page will shrink the situation will not appear. The Android phone picture is as follows:

I kept trying to solve the problem, but in the end it didn't work out.

Think one:

If you can imitate an apple, when the keyboard bounces out, the entire page is reduced to the bottom of the page just stick to the keyboard, that is perfect. But the biggest problem with this idea is that you can't get the exact height of the virtual keyboard (it turns out that the virtual keyboard can change its size ...). So this height is more impossible to get ...), but even get the height, can finish when the note that textarea onfocus, the keyboard pop-up and accurately calculated as the entire page narrowed down to the bottom of the page just paste the effect of the keyboard, there is a final big pit! There is no way to monitor the virtual keyboard when the user put away! So I don't know when to restore this page ... Although the onblur event can restore this page when the focus is lost, but the habit of Android users should be to press the physical return button on the phone or the virtual keyboard of the button on the keyboard, the problem is whether to return or put up the keyboard, the focus is still there, not lost ah, there is no way ... So the final question is how to monitor the virtual keyboard ...

Thinking Two:

Tried a method the effect was already very close. The code is as follows:

<div id= "fix-hegiht" style= "height:300px; width:100%; Display:none; " ></div>

In fact, in the text box onfocus, the above blank height of the div display, so you can put the page up high, there will be scroll bar, the effect is very good as shown below:

And after receiving the keyboard, unexpectedly the page will return to the top (I suspect that triggered the resize event, but after testing, regardless of the keyboard pop-up closed did not trigger Ah, regret), this is not the desired effect! The following figure:

Will find that although back to the top, it looks as if the same as the beginning without a scroll bar, but now the user can scroll, because that is responsible for the high space Div is still there, if the user rolled down will see a large blank, this must be dealt with off. So the question is, "When did you delete this empty div?" The best course is to be able to monitor when the keyboard is put away, but this seems unlikely. So I thought, if you can scroll to the empty div where the scroll bar to delete it. It can be like this, but the experience is not good ah, suddenly flashed a bit, and, if the user pop-up keyboard to operate the page can be scrolled, scroll to empty div place on the deletion of this div, that instant input box was covered ...

I also want to be able to scroll to the place of the empty Div, can not roll down it? If so, the user can not go down, then leave this blank div is no problem ah. But the idea can not be achieved, and there is no way to get out.

Three ideas:

I think this virtual keyboard block the problem of the input box should be everywhere ah, all kinds of registration pages are estimated, that how many years have been using Android I did not think this is a problem!? So I ran to casually find a registration page (such as Sohu mailbox) http://wap.mail.sohu.com/, screenshot as follows:

You can!? The entire page moved up a little, but no scroll bar!! How does this actually do!!?? I was wondering if it was a browser problem, because it was accessed by the browser with the phone itself. So I open a micro-letter, and then click on the site, sure as follows:

This is what a micro-mail browser would be like ... Finally ran to the QQ browser there, and someone asked this question, it is estimated that the X5 kernel upgrade after the bug ... Finally, in order to be able to use, or to use a blank div to support the high method. In the process of finding a solution, there is also a beautiful piece of code. From http://efe.baidu.com/blog/mobile-fixed-layout/may be used later, to determine whether the scroll bar to a certain position, as well as the direction of the slide in order to determine when to prevent the scroll bar scroll. The code has been commented in detail:

<script type= "Text/javascript" >//Prevent content area from rolling after the end of the page overall scrolling var content = document.queryselector (' main '); 
var starty; 
Content.addeventlistener (' Touchstart ', function (e) {//starting position starty = E.touches[0].clienty; 
}); 
Content.addeventlistener (' Touchmove ', function (e) {//high indicating scroll up//Bottom position indicates downward scrolling///1 allows 0 to prohibit var status = ' 11 '; 
var ele = this; 
Current position var currenty = E.touches[0].clienty; If the vertical offset is scrolltop to 0, either the content is less than the container has no scroll bar, or is greater than the container but the scroll bar is at the top if (Ele.scrolltop = = 0) {//If the content is less than the container then it is prohibited to scroll up and down, if greater than the status Ele.offsetheight >= ele.scrollheight? 
' 00 ': ' 01 '; else if (ele.scrolltop + ele.offsetheight >= ele.scrollheight) {/* 1. Vertical offset scrolltop+ The size of the entire element offsetheight (including borders) = entire content 
Area scrollheight proof has been rolled to the bottom can only scroll up; 2. offsetheight (including border) to be replaced by clientheight (excluding borders)? 
* * status = ' 10 '; //If status==11 is not in the above three cases, there is a scroll bar and the scroll bar is not at the top and not at the bottom if (status!= ' 11 ') {//To determine the current scrolling direction var direction = Currenty-starty > 0? 
' 10 ': ' 01 '; /* 1. Operation direction and current allowable state and operation, the result is 0, indicating that the direction is not allowed to scroll, prohibit the default event, prevent scrolling 
2.status is 00, there is no scroll bar, at this point, whether direction is up or down, to prevent scrolling 3.status to 01, indicating that there is a scroll bar, you can scroll down, at this time direction 01 is consistent with downward scrolling 4.status to 10, indicating that there is a scroll bar , you can scroll up, at which point the direction 10 conforms to scroll up 5. A. No scroll bar B. Scroll bars at the top but also scroll up c. scroll bar at the bottom but also scroll down to prevent scrolling/if (! 
parseint (Status, 2) & parseint (direction, 2))) {stopevent (e); 
} 
} 
}); </script>

Here to use the HTML5 touch events, respectively, four of the touch events: Touchstart, Touchmove, Touchend, Touchcancel. When you slide the screen, their triggering sequence is:

Touchstart: Triggers when the finger touches the screen

Touchmove: Triggers when the fingers that have touched the screen begin to move

Touchend: Triggers when the finger leaves the screen

Touchcancel: Trigger When a touch event is not at the end of normal

So you can get the position of the touch by using the properties shown above.

The above content to introduce the Android input box by the virtual keyboard to block the problem (micro-letter development), I hope to help you!