OnKeyPress事件和Javascript檢測鍵盤輸入
對於有些時候，我們需要檢測使用者鍵盤輸入的鍵盤資訊，來處理一些相應的事件。
這裡田子建議使用OnKeyPress=“”事件來處理。相類似的還有OnKeyUp和OnKeyDown事件，這些田子個人認為都不是特別的理想化。
假如，我們預定義一個方法function EventCommand(oEvent){ document.write(oEvent.keyCode); }，這個方法用來顯示輸入鍵盤的鍵值。那麼在OnKeyPress傳值的時候，就必須這麼傳：OnKeyPress="EventCommand(event);"，這裡引數event是關鍵字。
這裡給出一些鍵盤的鍵值：
回車 keyCode is 13
ESC keyCode is 27
Backspace keyCode is 8
Tab keyCode is 9
Shift keyCode is 16
Ctrl keyCode is 17
Alt keyCode is 18
Space keyCode is 32
Insert keyCode is 45
Delete keyCode is 46
我們看到什麼？
這樣一個keyCode的發現，最好的作用是用來檢測textbox框裡的使用者輸入。我們假設一個這樣的情況，使用者提出在頁面有很多文字框輸入的時候，最好是每一個文字框輸入完以後按回車鍵，跳入下一個文字框。這要換在以前除了按tab是不可能實現的。那麼現在，我們可以利用使用者在文字框輸入的鍵盤鍵值進行判斷並執行。
程式碼如下：
<HTML>
<HEAD>
<TITLE>handleEnterKey</TITLE>
<script language="JavaScript" text="text/javascript" src="handleEnterKey . JS">
</script>
</HEAD>
<BODY onload="handleTag('input');" OnKeyPress="handleTag('input');">
<input id="tb1" type="textbox" OnClick="setFocusNum(this);" OnKeyPress="handleEvent(event);" /><br>
<input id="tb2" type="textbox" OnClick="setFocusNum(this);" OnKeyPress="handleEvent(event);"/><br>
<input id="tb3" type="textbox" OnClick="setFocusNum(this);" OnKeyPress="handleEvent(event);"/><br>
<input id="tb4" type="textbox" OnClick="setFocusNum(this);" OnKeyPress="handleEvent(event);"/><br>
</BODY>
</HTML>
js檔案的內容：
var tb = 0;
var ArrayTextBox ;
function handleTag(tTagName){
ArrayTextBox = document.getElementsByTagName(tTagName);
ArrayTextBox[tb].focus();
}
function handleEvent(oEvent){
if (oEvent.keyCode == 13)
{
if (tb<ArrayTextBox.length-1)
{
tb += 1;
ArrayTextBox[tb].focus();
}else{
tb -= ArrayTextBox.length-1;
ArrayTextBox[tb].focus();
}
}
}
function setFocusNum(oTextBox){
for (var i=0;i<ArrayTextBox.length;i++)
{
if (ArrayTextBox[i].id == oTextBox.id)
{
tb=i;
}
有一個問題～！
問題有兩個：第一，這個例子不具有泛用性，意思是，這個js檔案，充其量只能在靜態頁面或者asp頁面或者其他web語言並且是基於html的情況下才可以。第二，如果頁面出現其他input標籤，並且該標籤的type不是textbox的話，這個方法也不具有泛用性。
下面這段程式碼是aspx頁面上文字框按回車自動跳轉的。他很好的規避了以上兩個問題。
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<script defer="defer" src=handleEnterKey . JS type="text/javascript"></script>
</head>
<body OnLoad="handleTag('input');" OnClick="setFocusNum(this);" OnKeyPress="handleEvent(event);" OnFocus="setFocusNum(this);"> <!-- OnClick="setFocusNum(this);" OnKeyPress="handleEvent(event);" OnFocus="setFocusNum(this);" -->
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox><br />
<asp:TextBox ID="TextBox3" runat="server"></asp:TextBox><br />
<asp:TextBox ID="TextBox4" runat="server"></asp:TextBox><br />
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox></div>
</form>
<label id="lMessage"></label>
</body>
</html>
然後是js檔案：
var tb = 0;
var ArrayTextBox;
var range;
function handleTag(tTagName){
var tmp = document.getElementsByTagName(tTagName);
range = document.body.createControlRange();
for(var i=0;i<tmp.length;i++){
if(tmp[i].type == "text"){
range.add(tmp[i]);
}
}
ArrayTextBox = range.item(0);
ArrayTextBox.focus();
lMessage.innerText = tb;
}
function handleEvent(oEvent){
if (oEvent.keyCode == 13)
{
if (tb<range.length-1)
{
tb += 1;
ArrayTextBox = range.item(tb);
ArrayTextBox.focus();
lMessage.innerText = tb;
}else{
tb -= range.length-1;
ArrayTextBox = range.item(tb);
ArrayTextBox.focus();
lMessage.innerText = tb;
}
}
}
function setFocusNum(oTextBox){
for (var i=0;i<range.length;i++)
{
ArrayTextBox = range.item(i)
if (ArrayTextBox.id == oTextBox.id)
{
tb=i;
}
}
lMessage.innerText = tb;
}
哦？？為什麼OnLoad的時候是傳input？？
恩，是的，他最不可思議的地方就是傳的是input而不是當初我想當然的asp:textbox。當然不排除你可能比我聰明更快的想到了為什麼。
這個方法，或者說功能最主要的目的是用在客戶端，而無論伺服器端是怎樣的語言，對於瀏覽器而言，他只能接受html資訊，所以，aspx頁面最終將會轉變成html裡的input標籤，文字框則是type為text。
所以開啟任意一個aspx頁面的客戶端原始檔，就會發現這一點。（我得承認我發現的太晚。）
結束語
他其實還能做很多事情～～哈哈～～
[文章出自：http://www.tzwhx.com/newOperate/html/2/22/223/17381.html]