Question

我有一个带有默认按钮的asp webforms面板控件中的多行文本框。我需要通过按Enter（返回）键提交表单，而不是转到textarea中的下一行。代码如下：

<asp:Panel ID="pnlChat" runat="server" CssClass="chat-entry" DefaultButton="btnChat">
     <p>Type Your Message and Press Enter</p>
          <asp:TextBox ID="txtChat" runat="server" CssClass="span12" TextMode="MultiLine" Rows="4"></asp:TextBox>
          <asp:Button ID="btnChat" runat="server" Text="Send" CssClass="btn" OnClick="btnChat_Click" />
</asp:Panel>

我尝试使用jquery keypress方法

  $("#<%= txtChat.ClientID %>").keypress(function (e) {
            if (e.which == 13) {
              //  alert('You pressed enter!');
              return false;
            }
        });

但是按Enter（返回）键不会提交表单。建议/解决方案是最受欢迎的。

btw：该面板位于更新面板内。

Answer 1

您可以在UpdatePanel外部有一个隐藏按钮，并调用该按钮的click事件来提交表单。

在标记中：

...
</asp:UpdatePanel>
<asp:Button ID="Button1" runat="server" style="display:none" OnClick="btnSubmit_Click" />

在代码中：

protected void btnSubmit_Click(object sender, EventArgs e)
{
    //Do whatever you need
}

在剧本中：

$(document).ready(function () {
    $("#<%= pnlChat.ClientID %>").on("keypress","#<%= txtChat.ClientID %>", function(e){
        if (e.which == 13) {
            var s = $(this).val();
            $(this).val(s + "\n");
            $("#<%= btnSubmit.ClientID %>").trigger('click');
        }
    });
});

虽然我不明白为什么在使用UpdatePanel时需要发布整个表单。

Answer 2

如果您的多行文字框不起作用，请将您的按钮从“更新”面板外部放置。它的工作对我来说很完美。我只是把我的asp按钮放在更新面板之外。这是我的多行文本框文本无效时的代码示例。

<td style="float: center; padding-left: 155px;">
                                        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                                            <ContentTemplate>
                                                <asp:Button ID="btnPre" OnClientClick="Validate();" ValidationGroup="group1" runat="server"
                                                    CssClass="alt_btn" Text="Preview Your Email" OnClick="btnPre_Click" TabIndex="8" />
                                                <asp:Button ID="Continue" OnClientClick="Validate();" ValidationGroup="group1" runat="server"
                                                    CssClass="alt_btn" Text="Continue" OnClick="Continue_Click" TabIndex="8" />
                                            </ContentTemplate>
                                        </asp:UpdatePanel>
                                    </td>

当我从更新面板的外侧放置我的按钮时，多行文本框文本更新完美。

 <td style="float: center; padding-left: 155px;">
                                                <asp:Button ID="btnPre" OnClientClick="Validate();" ValidationGroup="group1" runat="server"
                                                    CssClass="alt_btn" Text="Preview Your Email" OnClick="btnPre_Click" TabIndex="8" />
                                                <asp:Button ID="Continue" OnClientClick="Validate();" ValidationGroup="group1" runat="server"
                                                    CssClass="alt_btn" Text="Continue" OnClick="Continue_Click" TabIndex="8" />
                                    </td>

启用多行文本框以在asp.net Webforms中的Enter Key上汇总表单

2 个答案: