我正在使用jquery mobile,php,phonegap和cordova开发移动应用程序 我要求在虚拟键盘中所有表单元素(如文本框)都应具有下一个和上一个按钮,对于最后一个文本框,应显示Done / Go / Enter选项。 如何在不添加插件的情况下以编程方式处理这些按钮。 这是我的表格
<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>
如果有任何人有更好的想法,请分享
答案 0 :(得分:1)
表单中的所有字段都有prev / next按钮,这些按钮就像真正键盘上的标签一样。完成/进入/进入按钮......如果有数据要提交,它们将自然发生。我认为这只是归结为语义和正确构建表单。
在屏幕截图中,第一个字段被聚焦,下一个按钮可用(V形指向右侧),表格可以通过GO按钮提交。它可以提交,因为所有设备都知道此表单已完成,您的验证将决定数据是否完整。我在这里得到的是你无法随意隐藏返回/开始按钮。但是,您可以使用数字键盘省略它。
完成&#39;消息出现在虚拟键盘上方并且不提交(除非您提交模糊,因为使用它会模糊您关注的任何字段),并且看起来像文本链接。
&#39;输入&#39; &安培; &#39;去&#39;按钮将提交表格。因此,如果表单中的最后一个字段是数字(大手指按钮),那么您就赢了;除非您在该字段的模糊处提交表单,否则可以将其用于提交。
以下是一个工作示例:http://codepen.io/morganfeeney/pen/ojdRMQ
我构建它来测试手持设备上的虚拟键盘。去iPhone上查看一下;)
仅供参考:您提供的示例代码没有结束</form>
标记。