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 οnlοad="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" %>
<!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 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]
總結
以上是生活随笔為你收集整理的OnKeyPress事件和Javascript检测键盘输入的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Java 邮箱判断 正则表达式
- 下一篇： VB中KeyCode常数用法 VB 按键