OnKeyPress事件和Javascript检测键盘输入
對(duì)于有些時(shí)候，我們需要檢測(cè)用戶鍵盤輸入的鍵盤信息，來處理一些相應(yīng)的事件。
這里田子建議使用OnKeyPress=“”事件來處理。相類似的還有OnKeyUp和OnKeyDown事件，這些田子個(gè)人認(rèn)為都不是特別的理想化。
假如，我們預(yù)定義一個(gè)方法function EventCommand(oEvent){ document.write(oEvent.keyCode); }，這個(gè)方法用來顯示輸入鍵盤的鍵值。那么在OnKeyPress傳值的時(shí)候，就必須這么傳：OnKeyPress="EventCommand(event);"，這里參數(shù)event是關(guān)鍵字。
這里給出一些鍵盤的鍵值：
回車??????????? 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
我們看到什么？
這樣一個(gè)keyCode的發(fā)現(xiàn)，最好的作用是用來檢測(cè)textbox框里的用戶輸入。我們假設(shè)一個(gè)這樣的情況，用戶提出在頁面有很多文本框輸入的時(shí)候，最好是每一個(gè)文本框輸入完以后按回車鍵，跳入下一個(gè)文本框。這要換在以前除了按tab是不可能實(shí)現(xiàn)的。那么現(xiàn)在，我們可以利用用戶在文本框輸入的鍵盤鍵值進(jìn)行判斷并執(zhí)行。
代碼如下：
<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文件的內(nèi)容：
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;
?? }
有一個(gè)問題～！
問題有兩個(gè)：第一，這個(gè)例子不具有泛用性，意思是，這個(gè)js文件，充其量只能在靜態(tài)頁面或者asp頁面或者其他web語言并且是基于html的情況下才可以。第二，如果頁面出現(xiàn)其他input標(biāo)簽，并且該標(biāo)簽的type不是textbox的話，這個(gè)方法也不具有泛用性。
下面這段代碼是aspx頁面上文本框按回車自動(dòng)跳轉(zhuǎn)的。他很好的規(guī)避了以上兩個(gè)問題。
<%@ 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的時(shí)候是傳input？？
恩，是的，他最不可思議的地方就是傳的是input而不是當(dāng)初我想當(dāng)然的asp:textbox。當(dāng)然不排除你可能比我聰明更快的想到了為什么。
這個(gè)方法，或者說功能最主要的目的是用在客戶端，而無論服務(wù)器端是怎樣的語言，對(duì)于瀏覽器而言，他只能接受html信息，所以，aspx頁面最終將會(huì)轉(zhuǎn)變成html里的input標(biāo)簽，文本框則是type為text。
所以打開任意一個(gè)aspx頁面的客戶端源文件，就會(huì)發(fā)現(xiàn)這一點(diǎn)。（我得承認(rèn)我發(fā)現(xiàn)的太晚。）
結(jié)束語
他其實(shí)還能做很多事情～～哈哈～～
[文章出自：http://www.tzwhx.com/newOperate/html/2/22/223/17381.html]
總結(jié)
以上是生活随笔為你收集整理的OnKeyPress事件和Javascript检测键盘输入的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Java 邮箱判断 正则表达式
- 下一篇： java美元兑换,（Java实现） 美元