Phonegap / jQuery Mobile form submit button not respond to click while the keyboard displaying

829 views Asked by At

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?

0

There are 0 answers