Handling iOS virtual keyboard “previous”, “next”, “Go/Enter” buttons

Question

I am developing a mobile application with jquery mobile, php ,phonegap and cordova I have a requirement that in the virtual keyboard of all form elements like Text boxes should have next and previous buttons and for the last text box the Done/Go/Enter option should be shown. How can I handle those buttons programatically without adding plugins. Here is my form

<form id="loginForm" name="form1">
<div class="row mainpart paddingleftandright clsfieldPadding">
    <div class="col-lg-12">
        <div class="input-group1" id="email_div">
            <input type="email" id="login_form_email"
                placeholder="EMAIL ADDRESS" value="" data-clear-btn="true"
                data-mini="true" tabindex='1' class="clsPyType clsBodyTxt" autocapitalize="off" onBlur="getPasswordProtectionStatus(this.value);checkLoginEmail(this.value);">
            <span class="input-group-addon"><span class="glyphicon" style='display:none;' id="glyphicon_id1">!</span></span>
        </div>
    </div>
</div>
<div id="login_form_email_msg" class="clsPyType"></div>
<div class="row mainpart paddingleftandright clsfieldPadding2">
    <div class="col-lg-12">
        <div class="input-group1" id="password_div">
            <input type="password" id="login_form_password"
                placeholder="PASSWORD" value="" data-clear-btn="true"
                autocomplete="off" data-mini="true" tabindex='2' class="clsPyType clsBodyTxt" onBlur="checkLoginPassword(this.value);">
            <span class="input-group-addon"><span class="glyphicon" style='display:none;' id="glyphicon_id2">!</span></span>
        </div>
    </div>
</div>
<div id="login_form_password_msg" class="clsPyType"></div>
<div class="row mainpart paddingleftandright">
    <div class="col-lg-12 remember-me">
        <select name="slider" data-role="slider" id="rememberMe">
            <option value="0">No</option>
            <option value="1">Yes</option>
        </select>
        <div class="col-sm-5 clsPyTypeUprBold Clsremember">Remember Login</div>
    </div>
</div>
<div class="row mainpart paddingleftandright">
    <div class="col-lg-12">
        <!-- <a data-role="button" data-transition="flip"
                 data-direction="reverse" class="clsBtnHead2 clsBtnRed" id="login_form_submit" onClick="login_form_submit();"><div class="clsBtnTop">LOGIN</div></a> -->
        <input type="submit" tabindex='3' id="login_form_submit" class="clsBtnHead2 clsBtnRed" onfocus=" $(this).trigger('click');" value="LOGIN"/>
    </div>
</div>

If any one have better ideas please share

Answer 1

All of the fields within a form will have the prev / next buttons which act like tabs do on a real keyboard. The done/Go/enter buttons... well they will naturally occur if there is data to submit. I think this just boils down to semantics and building your form correctly.

In the screen shot, the first field is focused, the next button is available (chevron pointing to the right) and the form is able to be submitted via the GO button. It can be submitted as for all the device knows this form is complete, your validation will decide whether or not the data is complete. What I am getting at here is that you won't be able to hide the return/Go button at will. However you can omit it using a numerical keypad.

The 'done' message occurs above the virtual keyboard and does not submit (unless you submit on blur, as using it blurs whatever field you were focusing on), and looks like a text link.

The 'Enter' & 'Go' buttons will submit the form. So if the last field in your form is numerical (big finger buttons) then you won;t be able to use it for submission unless you submit the form on blur of that field.

Here is a working example: http://codepen.io/morganfeeney/pen/ojdRMQ

I built that to test virtual keyboards on handheld devices. Go and check it out on your iPhone ;)

FYI: the example code you supplied does not have a closing </form> tag.