asp.net 使用 Enter 键提交表单

引言

最近在写 TrueLove 的时候需要添加酒店，想实现那种和豆瓣差不多的使用 Enter 键来提交表单添加酒店。翻阅了 CodeProject 和 123ASPX 的文章，找了两种方法，下面来简单介绍以下。

使用 JS 代码

我们在表单里面的 TextBox （asp.net控件），然后在里面添加 attributes 响应对 JS 函数处理。具体我也不知道怎么说，看看代码就了解了。

 

Default.cs 

//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)");
}

然后在default.aspx的页面里面写入下面的js代码：

default.aspx 

<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>

keyCode

对于 keypress 事件，该属性声明了被敲击的键生成的 Unicode 字符码。对于 keydown 和 keyup 事件，它指定了被敲击的键的虚拟键盘码。虚拟键盘码可能和使用的键盘的布局相关。

onkeypress 事件

返回 Event 对象参考手册

定义和用法

onkeypress 事件会在键盘按键被按下并释放一个键时发生。

语法

οnkeypress="SomeJavaScriptCode"

参数	描述
SomeJavaScriptCode	必需。规定该事件发生时执行的 JavaScript。

 

提示和注释

浏览器差异：Internet Explorer 使用 event.keyCode 取回被按下的字符，而 Netscape/Firefox/Opera 使用 event.which。

实例

在本例中，用户无法在输入框中键入数字：

代码

< html >
< body >
< script  type ="text/javascript" >
function  noNumbers(e)
{
var  keynum
var  keychar
var  numcheck

if (window.event)  //  IE
  {
  keynum  =  e.keyCode
  }
else   if (e.which)  //  Netscape/Firefox/Opera
  {
  keynum  =  e.which
  }
keychar  =  String.fromCharCode(keynum)
numcheck  =   / \d /
return   ! numcheck.test(keychar)
}
</ script >

< form >
< input  type ="text"  onkeypress ="return noNumbers(event)"   />
</ form >

</ html >

JavaScript fromCharCode() 方法

JavaScript String 对象参考手册

定义和用法

fromCharCode() 可接受一个指定的 Unicode 值，然后返回一个字符串。

语法

String.fromCharCode(numX,numX,...,numX)

参数	描述
numX	必需。一个或多个 Unicode 值，即要创建的字符串中的字符的 Unicode 编码。

提示和注释

注释：该方法是 String 的静态方法，字符串中的每个字符都由单独的数字 Unicode 编码指定。

它不能作为您已创建的 String 对象的方法来使用。因此它的语法应该是 String.fromCharCode()，而不是 myStringObject.fromCharCode()。

实例

在本例中，我们将根据 Unicode 来输出 "HELLO" 和 "ABC"：

<script type="text/javascript">

document.write(String.fromCharCode(72,69,76,76,79))
document.write("<br />")
document.write(String.fromCharCode(65,66,67))

</script>

以上代码的输出：

HELLO
ABC

 

 

使用 Panel 来实现

panel 的实现方法实现起来很简单，不用写任何一行代码。把我们的 TextBox 放到 panel 控件里面，然后设置 panel 控件的 defaultbutton 的属性为我们要响应的那个button的id。

<asp:Panel ID="panSearch" runat="server" DefaultButton="btnSearch2" Width="100%" >

只需要这样就ok了，哈哈，很简单...

总结

这两种方法根据你自己的喜好来使用，也许你的js水平很高，那么第一种方法很适合你，我是基本上的js盲，所以俺还是倾向与第二种方法啦。