处理iOS虚拟键盘的“上一个”，“下一个”，“执行/进入”按钮

Question

我正在用jquery mobile，php，phonegap和cordova开发一个移动应用程序，我要求在所有表单元素（例如文本框）的虚拟键盘中都应具有下一个和上一个按钮，对于最后一个文本框，应具有“完成/转到/输入”选项应该显示。 如何在不添加插件的情况下以编程方式处理这些按钮。 这是我的表格

<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>

如果有人有更好的主意，请分享

Answer 1

表单中的所有字段都将具有上/下一个按钮，其作用类似于真实键盘上的选项卡。 完成/执行/进入按钮...如果有要提交的数据，它们自然就会发生。 我认为这可以归结为语义并正确构建表单。

在屏幕截图中，第一个字段被聚焦，下一个按钮可用（人字形指向右侧），并且可以通过GO按钮提交表单。 可以提交所有设备知道此表格已完成的信息，您的验证将决定数据是否完整。 我在这里得到的是，您将无法随意隐藏“返回/转到”按钮。 但是，您可以使用数字键盘将其忽略。

“完成”消息出现在虚拟键盘上方，并且不会提交（除非您使用模糊提交，因为使用它会模糊您所关注的任何字段），并且看起来像文本链接。

“输入”和“执行”按钮将提交表单。 因此，如果表单中的最后一个字段是数字（大手指按钮），那么您将无法使用它进行提交，除非您在该字段模糊时提交表单。

这是一个工作示例： http : //codepen.io/morganfeeney/pen/ojdRMQ

我建立了它来测试手持设备上的虚拟键盘。 去在你的iPhone上检查一下;）

仅供参考：您提供的示例代码没有结束</form>标记。