如何捕获在文本框中按下的ENTER键

本文关键字：ENTER 何捕获 文本 | 更新日期: 2023-09-27 18:08:28

我正在开发一个简单的ASP聊天系统。. NET和c#(这是一个网站，不是windows应用程序)。我正在显示一个聊天窗口，其中包含一个文本框，让用户可以写他/她的消息在它。我想要的是，当用户按下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>

谢谢。

如何捕获在文本框中按下的ENTER键

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

我认为在客户端使用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对象并进行反序列化，但这给了您总体思路!

通过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
});

相关文章：