OnKeyPress事件和Javascript检测键盘输入

清疚 2023-10-17 20:16 3阅读 0赞

对于有些时候，我们需要检测用户键盘输入的键盘信息，来处理一些相应的事件。

这里田子建议使用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是不可能实现的。那么现在，我们可以利用用户在文本框输入的键盘键值进行判断并执行。

代码如下：

&ltHTML>  
&ltHEAD>  
&ltTITLE>handleEnterKey</TITLE>  
&ltscript language="JavaScript" text="text/javascript" src="handleEnterKey . JS">

</script>  
</HEAD>

&ltBODY οnlοad="handleTag('input');" OnKeyPress="handleTag('input');">  
&ltinput id="tb1" type="textbox" OnClick="setFocusNum(this);" OnKeyPress="handleEvent(event);" />&ltbr>  
&ltinput id="tb2" type="textbox" OnClick="setFocusNum(this);" OnKeyPress="handleEvent(event);"/>&ltbr>  
&ltinput id="tb3" type="textbox" OnClick="setFocusNum(this);" OnKeyPress="handleEvent(event);"/>&ltbr>  
&ltinput id="tb4" type="textbox" OnClick="setFocusNum(this);" OnKeyPress="handleEvent(event);"/>&ltbr>  
</BODY>

</HTML>

js文件的内容：

问题有两个：第一，这个例子不具有泛用性，意思是，这个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][http_www.w3.org_TR_xhtml1_DTD_xhtml1-transitional.dtd]">

&lthtml xmlns="[http://www.w3.org/1999/xhtml][http_www.w3.org_1999_xhtml]" >  
&lthead runat="server">  
&lttitle>Untitled Page</title>  
&ltscript defer="defer" src=handleEnterKey . JS type="text/javascript"></script>  
</head>  
&ltbody **OnLoad="handleTag('input');" OnClick="setFocusNum(this);" OnKeyPress="handleEvent(event);" OnFocus="setFocusNum(this);"**>   
&ltform id="form1" runat="server">  
&ltdiv>  
&ltasp:TextBox ID="TextBox2" runat="server"></asp:TextBox>&ltbr />  
&ltasp:TextBox ID="TextBox3" runat="server"></asp:TextBox>&ltbr />  
&ltasp:TextBox ID="TextBox4" runat="server"></asp:TextBox>&ltbr />  
&ltasp:TextBox ID="TextBox1" runat="server"></asp:TextBox></div>  
</form>  
&ltlabel 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&lttmp.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&ltrange.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&ltrange.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\]

[http_www.w3.org_TR_xhtml1_DTD_xhtml1-transitional.dtd]: http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
[http_www.w3.org_1999_xhtml]: http://www.w3.org/1999/xhtml