开发者

how to make html page detect enter key pressed?

I am using VSTS 2008 + C# + .Net 3.5 + IIS 7.0 + ASP.Net to develop a web applicatio开发者_Go百科n. The web application has an aspx page called default.aspx. And I want to implement the effect that when user press the enter key of keyboard, it is the same effect of press button "Action". Any ideas how to implement?

Here is the default.aspx file,

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head id="Head1" runat="server"> 
  <title></title> 
</head> 
<body> 

  <script type="text/javascript"> 
    function requery() { 
      var query = location.search.substring(1); 
      var pairs = query.split("&"); 
      var param1Value = document.getElementById("txtParam1").value; 

      url = "/Default.aspx?param1=" + param1Value; 
      for (var i = 0; i < pairs.length; ++i) { 
        var pair = pairs[i]; 
        if ((pair.indexOf("param1") != 0) && (pair.length > 0)) { 
          url += "&" + pair; 
        } 
      } 
      location.href = url; 
    } 
  </script> 

  <form id="form1" runat="server"> 
  <div> 
    <asp:TextBox ID="txtParam1" runat="server"></asp:TextBox> 
    <input type="button" value="Action" onclick="requery()" /> 
  </div> 
  </form> 
</body> 
</html> 

Here is the code behind file default.aspx.cs,

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            txtParam1.Text = Request.QueryString["param1"];
        }
    }
}


add an event handler to the document's keydown event. explanation in the comments.

    function keydownHandler(e) {

        if (e.keyCode == 13) {  // 13 is the enter key

            requery();  // call your function.

            // alternately, give your button an id and used 
            // document.getElementById('myID').click();

            // prevent the browser from doing whatever it normally
            // does when you push the enter key.
            // (not tested for this situation, may need tweaking)
            if (e.preventDefault) {
                e.preventDefault(); // FF,chrome             
            }
            else {
                return false;       // IE
            }
        }
    }

    // register your handler method for the keydown event
    if (document.addEventListener) {
        document.addEventListener('keydown', keydownHandler, false);
    }
    else if (document.attachEvent) {
        document.attachEvent('onkeydown', keydownHandler);
    }


If you are browsing from Internet Explorer this is an annoying issue. Add a textbox with a style of display:none;visibility:hidden; The enter key will respond appropriately. This typically occurs on forms with one text input in IE. Add the hidden one as mentioned above under your first input field

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜