處理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>標記。