I using phonegap + jQuery mobile to create an iOS project. I have a simple form with a submit button as below:
<div data-role="content">
<form id="loginForm">
<div data-role="fieldcontain" class="ui-hide-label">
<label for="username">Username:</label>
<input type="text" name="username" id="username" value="" placeholder="Username" />
</div>
<div data-role="fieldcontain" class="ui-hide-label">
<label for="password">Password:</label>
<input type="password" name="password" id="password" value="" placeholder="Password" />
</div>
<input type="submit" value="Login" id="submitButton">
</form>
<br>
<div id="register"><a href="#registerPage" data-transition="slide">Register?</a></div>
</div>
</div></body>
And this is the JS file.
function init() {
document.addEventListener("deviceready", deviceReady, true);
delete init;
}
function deviceReady() {
$("#loginForm").on("submit",handleLogin);
$("#registerform").on("submit",handleRegister);
}
The keyboard 'Go' function or the enter is functioning pretty well, but the page stuck with some "whiteblock" when i click the submit button while the keyboard is displaying.
I will need to swipe up and down in the page to get it back to normal view. It was like nothing happen but only to dismiss the keyboard. Is this a normal behaviour of jQuery? Any one has the solution to solve this problem?