在 ASP.NET 文本框中捕获按键答案

【问题标题】：Catching keypress in ASP.NET textbox在 ASP.NET 文本框中捕获按键
【发布时间】：2010-11-23 16:20:37
【问题描述】：

是否有一种简单的方法可以在 ASP.NET 文本框中捕获按键（在我的情况下为 F5），并执行服务器方法作为响应？

我创建了一个简单的 SQL 前端，出于习惯（来自 SQL Server Mgmt Studio），我在输入完查询后一直按 F5，但这总是刷新浏览器，而不是执行我的 SQL 查询:-)

我可以在 ASP.NET 中使用一些 Javascript 或 jQuery 来做到这一点吗？

马克

更新：

我的 ASP.NET 页面上有这个 jQuery 代码：

 $(document).ready(function() {
    $("#<%= txtQuery.ClientID %>").keydown( function (e) {
        if (e.keycode == 116) {
           $("#<%= btnExecute.ClientID %>").trigger('click');
        }
    });
 });

我尝试了“e.which”、“e.keycode”和各种 keycode 值的各种组合 - 但似乎都不起作用。我在我的开发机器上使用 MS IE 7。 txtQuery 是我输入查询的 ASP.NET 文本框，btnExecute 是将查询发送到 SQL Server 以执行的 ASP.NET 按钮。

有什么想法吗？我是否需要以某种方式抑制标准事件处理？如果是这样：那我该如何实现呢？

【问题讨论】：

F5被浏览器刷新！
是的，我知道并注意到了 - 但为什么我不能捕获例如F12 ??默认情况下，浏览器不会将其用于任何内容.....

标签： asp.net jquery keyboard

【解决方案1】：

见keypress( fn )

$("#yourtextboxId").keypress( function (e) {
   // do stuff here
});

和

e.which

将识别按下的键，我认为 F5 的键码是 116

要触发事件，您可以使用

trigger方法

$("#yourexecutescriptbutton").trigger('click');

编辑：

如果您需要捕捉 F5，则提供 keydown 事件处理程序

$("#yourtextboxId").keydown( function (e) {
        if ( e.which === 116 )
        {
            $("#yourexecutescriptbutton").trigger('click');  
        }
    });

【讨论】：

好的，那么如何让 jQuery “单击”我的“执行脚本”按钮，以便执行服务器端方法？
如果按下的键是 F5，则将“// do stuff here”替换为对服务器的 AJAX 调用
似乎不起作用 - F5 仍然刷新浏览器，并且使用 e.which == 123 表示 F12 根本没有任何作用:-(

【解决方案2】：

如果您想从客户端进行服务器端调用，您需要使用一些 javascript 来启动回发，或者对您的应用程序执行 AJAX 调用。

首先，您需要处理按键操作。 jQuery 提供了方便的keypress 方法来捕获元素上的按键：

$("#mytextbox").keypress(function(e){
    // Use e.which, etc to find out which key was pressed.
});

很遗憾，功能键 (F1-F12) 在某些不会生成 keypress 事件的浏览器中需要特殊处理。要在所有现代浏览器中可靠地捕获功能键，您必须考虑使用 keydown 和 keyup 事件。我建议您阅读this article 以了解如何解释您支持的浏览器中的关键事件。

接下来，您需要创建一个 ASP.NET Web 方法。这样做的方法是在您的页面上创建一个公共静态方法（或者如果您愿意，也可以创建一个单独的页面），然后使用 WebMethodAttribute 属性对其进行装饰：

[WebMethod]
public static string MyMethod(int foo, int bar, string bob)
{
    return "Welcome to The World of Tomorrow!";
}

最后，你可以使用 jQuery 来调用这个方法并对响应做一些事情：

var request = $.ajax({
    type: "POST",
    url: "MyPage.aspx/MyWebMethod",
    data: "{ foo:22, bar:19, bob:'A string' }",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function(msg) {
        var response = null;

        if (typeof (msg.d) != 'undefined')
            response = msg.d;

        if (response == null)
            Error('Message returned by ASP.NET AJAX call is not in the expected format.');

        alert(response);
        },
    error: function(request, textStatus, errorThrown) {

        if (console && typeof console.log != "undefined") {

            try {
                var result = eval("(" + request.responseText + ")");

                if (result && typeof result.Message != "undefined")
                    console.log(result.ExceptionType + ": " + result.Message + "\n" + result.StackTrace);
            }
            catch (ex) {
                console.log(request.responseText);
            }
        }
    }
});

调用成功后，这段代码将显示“欢迎来到明日世界！”的警报，作为 ASP.NET 方法的响应传递给浏览器。

简短的回答是，您提出的问题完全有可能，但并不像您想象的那么简单。检测按键的麻烦可能特别麻烦。祝你好运！

【讨论】：

是的，我注意到了！ :-) 我似乎无法可靠地抓住按键 - 无论我使用哪个键（在 IE 7 上）......嗯......

【解决方案3】：

要抑制事件的默认行为，您必须阻止它冒泡到更高的元素。为此，只需从事件处理程序中返回 false：

$("#yourtextboxId").keydown( function (e) {
    if ( e.which === 116 )
    {
        $("#yourexecutescriptbutton").trigger('click');
        return false; // Stops keydown event being bubbled.  
    }
});

不幸的是，根据浏览器对功能键的解释方式，除了此处的行为之外，它可能还需要防止针对该特定键引发 keydown 和 keyup 事件。

【讨论】：

我现在在 MS IE 7 中同时捕获了 keydown 和 keyup 事件，并尝试了 e.which 和 e.keycode - 无济于事：- （我想我会习惯在浏览器 SQL 查询窗口中不按 F5 :-(

【解决方案4】：

您只需在 jquery 中获取 ASP.NET 文本框的客户端 ID。然后通过 jquery 调用 ajax，如下所示。

var aspTextBox = $("#<%=Me.TextBox1.ClientId%>");
aspTextBox.keypress(function(e){
//Code for $.ajax request
    if(e.which==13){
    $.ajax({
    type:"POST",
    url:"WebService.asmx/GetData",
    contentType:"application/json;charset=utf-8",
    dataType:"json",
    data:"{}",
    success:function(data){
        },
    error:function(a,b,c){
        },
    });
    }
});

【讨论】：