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]