1. 程式人生 > >asp.net 使用 Enter 鍵提交表單

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

定義和用法

onkeypress 事件會在鍵盤按鍵被按下並釋放一個鍵時發生。

語法

onkeypress="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
  }
elseif(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() 方法

定義和用法

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盲,所以俺還是傾向與第二種方法啦。