android键盘更改phonegap应用程序的布局

Question

I create a quiz application for android using phonegap framework, The first page of application contains a sign up form, i want to get user information. my code is

<table class="m">
  <tr>
    <td class="left">Name:</td>
    <td class="right"><input class="t" type="text"/></td>
  </tr>
  <tr>
    <td class="left">Image:</td>
    <td class="right"><input class="t" type="text"/></td>
  </tr>
  <tr>
    <td class="left">Email:</td>
    <td class="right"><input class="t" type="text"/></td>
  </tr>
  <tr>
    <td class="left">Phone:</td>
    <td class="right"><input class="t" type="text"/></td>
    </tr>
</table>

But when i click on the text field the android keyboard appears on the screen and also it changes the height of my layout, finally the first input field is lifted up and not visible to user

How can i fix this problem

Answer 1

I believe your html codes are too simple, may be it should be a little bit more complicated. In my case, I put the table inside the div tag, and set the width and height of the div by JavaScript according to the screen width and height of different phones and browsers.

Also, the font-size are set at a ratio with respect to the screen width so that actual font size seen by the user is approximately the same for different phone.

then, use the scrollheight of the div to make sure the user can see the focused input textbox when it is being edited.