按 Enter 键触发按钮点击

• 下载源文件 - 7.5 KB

引言

你是否曾经想过在 ASP.NET 中捕获回车键按下事件并让它为你点击一个按钮？本文介绍了两种捕获回车键按下事件然后点击按钮的方案。一种方案使用 JavaScript，另一种使用 Panel 控件。

背景

大多数人喜欢事情以某种方式工作。考虑一个搜索引擎文本框。在你输入搜索文本后，大多数人只想按回车键并开始搜索。当你不得不抓起鼠标并将光标移动到搜索按钮并点击它时，这很麻烦。本文介绍了针对此问题的两种解决方案。

问题所在

网页有文本框、文本区域等，用户在其中输入文本。通常，在输入文本后，用户需要点击一个按钮。它可能是搜索按钮、提交按钮或其他类型的按钮。问题是如何捕获回车键按下事件，以便可以点击正确的按钮。

解决方案

让我们探讨一下针对此问题的两种解决方案。首先，让我们看一下使用 JavaScript。使用此解决方案，每个文本框都需要附加一些 JavaScript 到 onKeyPress JavaScript 事件。我通常在代码隐藏的 pageload 方法中执行此操作。

//Add the javascript so we know where we want the enter key press to go
if (!IsPostBack)
{
   txtboxFirstName.Attributes.Add("onKeyPress", 
                   "doClick('" + btnSearch.ClientID + "',event)");
   txtboxLastName.Attributes.Add("onKeyPress", 
                  "doClick('" + btnSearch.ClientID + "',event)");
   txtboxAddress1.Attributes.Add("onKeyPress", 
                  "doClick('" + btnSearch.ClientID + "',event)");
   txtboxAddress2.Attributes.Add("onKeyPress", 
                  "doClick('" + btnSearch.ClientID + "',event)");
   txtboxCity.Attributes.Add("onKeyPress", 
              "doClick('" + btnSearch.ClientID + "',event)");
   txtboxState.Attributes.Add("onKeyPress", 
               "doClick('" + btnSearch.ClientID + "',event)");
   txtboxZipcode.Attributes.Add("onKeyPress", 
                 "doClick('" + btnSearch.ClientID + "',event)");
}

注意：你将按钮的 ClientID 传递给 JavaScript 方法，以便 JavaScript 方法可以找到该按钮并调用其 Click 方法。

接下来，我们需要一个名为 doClick 的 JavaScript 方法在 ASP.NET 表单中。

<SCRIPT type=text/javascript>
    function doClick(buttonName,e)
    {
        //the purpose of this function is to allow the enter key to 
        //point to the correct button to click.
        var key;

         if(window.event)
              key = window.event.keyCode;     //IE
         else
              key = e.which;     //firefox
    
        if (key == 13)
        {
            //Get the button the user wants to have clicked
            var btn = document.getElementById(buttonName);
            if (btn != null)
            { //If we find the button click it
                btn.click();
                event.keyCode = 0
            }
        }
   }
</SCRIPT>

下一个解决方案是使用 Panel 控件。在这种情况下，面板正在完成所有工作。

<asp:Panel ID="panSearch" runat="server" 
       DefaultButton="btnSearch2" Width="100%" >
    <table width="100%">
    
    <tr>
     <td>First Name</td>
     <td ><asp:TextBox ID="txtboxFirstName2" 
           runat="server" ></asp:TextBox></td>
    </tr>
    ...

请注意，Panel 标签有一个名为 DefaultButton 的属性。你将此属性设置为你希望在回车键按下事件上点击的按钮的 ID。因此，Panel 内的任何文本框都将把其回车键按下事件定向到 Panel 的 DefaultButton 属性中设置的按钮。

哪一个更好？

我想我们可以花很多时间争论哪种方法更好。有些人喜欢 JavaScript，所以这可能更好。其他人讨厌 JavaScript 并且更喜欢编写更少的代码，因此他们会选择 Panel 解决方案。我想指出的一件事是，如果你有几个按钮并且需要让不同的文本框点击不同的按钮，那么你必须使用 JavaScript 解决方案，因为它为你提供了这种灵活性。我想我将让你决定哪种解决方案最适合你的需求。

结论

希望本文演示了两种有用的技术来捕获回车键按下事件并将其定向到点击正确的按钮。请告诉我你更喜欢哪种方法。