如何捕获在 TextBox 中按下的 ENTER 键？答案

【问题标题】：How to Capture ENTER Key which is pressed in TextBox?如何捕获在 TextBox 中按下的 ENTER 键？
【发布时间】：2011-09-14 10:19:46
【问题描述】：

我正在用 C# 在 ASP.NET 中开发一个简单的聊天系统（它是一个网站而不是 Windows 应用程序）。我正在显示一个包含 TextBox 的聊天窗口，以便用户可以在其中编写他/她的消息。我想要的是，当用户按下 ENTER 键时，我将能够捕获该 ENTER 按下事件并可以调用将在 .cs 文件中的函数。我怎样才能做到这一点？这是我项目中的代码段：

    <!-- Some code here -->

    <asp:textbox TextMode="Multiline"
    Columns="28"
    id="Textbox1"
    Rows="5"
    runat="server"
    BorderStyle="Solid"
    BorderColor="Bisque"
    class="msg-area">
    </asp:textbox>

</asp:Panel>

谢谢。

【问题讨论】：

订阅包含表单的提交事件怎么样？
我不知道该怎么做。表单是在主文件中创建的，在这个文件（聊天窗口）中只有 asp:Panel 标签包含这个文本框（如你在上面的代码中所见）！
取决于您使用的 JavaScript 库。对于 jQuery，请查看：api.jquery.com/submit 然后您可能需要将 ajax 请求放入提交处理程序中。
是否可以在这里添加一个按钮，然后您可以使用面板的defaultButton属性
这似乎不是有效的 xml。像 defaultbutton 这样的东西控制表单的回发。大多数浏览器会在按下 enter 时提交表单，除非在多行文本框中按下它，在这种情况下，enter 键会在文本框中添加一个换行符。如果你想覆盖它，你将需要 javascript。

标签： c# asp.net

【解决方案1】：

由于它是一个多行文本框，您必须处理其中一个按键事件并让它回发表单，以便您可以在服务器上处理它。您也可以进行回调或 ajax 调用，但无论哪种方式，您都需要让 javascript 事件处理程序启动对服务器的调用，以便您的 c# 代码可以运行。我需要更多关于你试图做什么和你用什么来给出更详细的答案。

【讨论】：

【解决方案2】：

我认为使用 AJAX 在客户端做这种事情是最好的方法。在 javascript 中，要捕获回车键，请使用 ascii 值 13。如果用户按下该键，则收集数据并进行 ajax 调用。在服务器端使用 WebMethod 来处理调用。使用 jQuery，通过它的类而不是 ID 引用您的文本框...... ID 将不起作用，因为 asp.net 在呈现页面时将它自己的标识符添加到 id。因此，要从文本框中获取值，请执行

var msgValue = $(".msg-area").val()

要在服务器端调用您的函数，请执行以下操作：

$.ajax({
    type: "POST",
    url: "yourwebpage.aspx/PostChat,
    contentType: "application/json; charset=utf-8",
    processData: false,
    global: false,
    success: function (data) {
        ajaxData = data;
        ajaxResult = true;
    },
    error: function (xhr, ajaxOptions, thrownError) {
        ajaxResult = false;
    }
});

最后，在服务器端，添加如下函数：

    [System.Web.Services.WebMethod]
    public static void PostChat()
    {
         /* post chat code here */
    }

这里遗漏了一些细节（例如在 PostChat() 方法中，您需要将 PostChat(SomeObjectContainingChatData) 等数据作为 JSON 对象传递并反序列化，但这为您提供了大致思路！

【讨论】：

【解决方案3】：

快速实现通过jQuery捕获文本框：

$.fn.captureEnter = function(options) {
// Parameters = OBJECT {action, preventDefault}
// action - Javascript function to be called upon the enter keypress. Send NULL to perform NO ACTION
// preventDefault - Set to FALSE if you don't want to return FALSE
var defaults = {
    action: function() {
        alert('The enter button has been captured. Please provide a function to run on enter.');
    },
    preventDefault: true
};
options = $.extend(defaults, options);

return this.each(function() {
    var el = this;
    $(el).keypress(function(e) {
        var code = e.keyCode || e.which;
        if (code == 13) { //Enter keycode
            if ((typeof options.action) == "function") {
                options.action(el);
            }

            if (options.preventDefault) {
                e.preventDefault();
            }

        }
    });
});

};

$('TEXTBOX').captureEnter({
    action: postMessageAjaxFunction
});

【讨论】：