首页 > 解决方案 > 在模态中按回车键关闭模态但不提交数据

问题描述

我正在使用 asp.net webforms 和 bootstrap 3 我遇到的问题是当按下回车键时,将密码字段集中在关闭模式,但没有提交数据。

看到其他人有类似的问题,但他们的模式中有不同的元素,例如,我的代码中有 asp:button 而其他可以使其工作的人则使用 input type="submit" 代替。

<div class="modal fade borderless" id="reviewSign" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <a class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></a>
                        <h4 class="modal-title">You are about to review document:
                            <asp:Label ID="lblReviewSignDocName" runat="server" Text=""></asp:Label>
                            <asp:Label ID="lblReviewSignDocNr" runat="server" Text=""></asp:Label>
                        </h4>
                    </div>
                    <div class="modal-body">
                        <h5>Enter credentials and press "Ok" to review</h5>
                        <br />
                        <table>
                            <tbody>
                                <tr>
                                    <td>Username: </td>
                                    <td>
                                        <asp:TextBox ID="txtUserForReview" Class="form-control" Placeholder="Login Credentials" runat="server"></asp:TextBox></td>
                                </tr>
                                <tr>
                                    <td>Password: </td>
                                    <td>
                                        <asp:TextBox ID="txtPasswordForReview" Class="form-control" Placeholder="Password" TextMode="Password" runat="server"></asp:TextBox></td>
                                </tr>
                            </tbody>
                        </table>
                        <div runat="server" id="LNoteReviewSignDiv" visible="false">
                            <br />
                            <asp:Label ID="LNoteReviewSign" ForeColor="Red" runat="server"></asp:Label>
                            <br />
                        </div>
                    </div>
                    <div class="modal-footer">
                        <asp:Button runat="server" CssClass="btn btn-primary" Text="Ok" ID="btnReviewSign" OnClick="btnReviewSign_Click" />
                        <a class="btn btn-default" data-dismiss="modal">Cancel</a>
                    </div>
                </div>
            </div>
            <script type='text/javascript'>
                function openmodalReviewSign() {
                    $('[id=reviewSign]').modal('show');
                    $("#<%=txtPasswordForReview.ClientID %>").focus(200);
                }
            </script>
        </div>

预期的是,在密码字段集中时按 enter 将与按 sign 按钮具有相同的效果。另一个输入字段从后面的代码中设置为只读,因此无法聚焦。

或者,如果无法通过按 Enter 提交,我宁愿在按 Enter 时什么也不发生。

标签: asp.nettwitter-bootstrap-3webforms

解决方案


正如@AlexKudryashev 所建议的那样,将所有输入和按钮包装在一个 asp:Panel 中并设置 DefaultButton="btnReviewSign" 解决了这个问题。

请记住,如果您在.net webforms 中编码您的网站,这只会解决这个问题。


推荐阅读