专栏首页王磊的博客OnKeyPress事件和Javascript检测键盘输入

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

代码如下:

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

</script> </HEAD>

&ltBODY onload="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文件的内容:

var tb = 0; var ArrayTextBox ; function handleTag(tTagName){ ArrayTextBox = document.getElementsByTagName(tTagName); ArrayTextBox[tb].focus(); } function handleEvent(oEvent){ if (oEvent.keyCode == 13) {    if (tb&ltArrayTextBox.length-1)    {     tb += 1;     ArrayTextBox[tb].focus();    }else{     tb -= ArrayTextBox.length-1;     ArrayTextBox[tb].focus();    } } } function setFocusNum(oTextBox){ for (var i=0;i&ltArrayTextBox.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">

&lthtml xmlns="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);"> <!-- 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]

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 为什么建议你使用枚举?

    枚举是 JDK 1.5 新增的数据类型,使用枚举我们可以很好的描述一些特定的业务场景,比如一年中的春、夏、秋、冬,还有每周的周一到周天,还有各种颜色,以及可以用...

    Java中文社群_老王
  • c#字符相似度对比通用类

    本类适用于比较2个字符的相似度,代码如下: using System; using System.Collections.Generic; using Syst...

    Java中文社群_老王
  • JVM(二)Java虚拟机组成详解

    Java虚拟机(Java Virtual Machine)下文简称jvm,上一篇我们对jvm有了大体的认识,进入本文之后我们将具体而详细的介绍jvm的方方面面,...

    Java中文社群_老王
  • SpringBoot 实战 (十八) | 整合 MongoDB

    MongoDB 是由 C++ 编写的非关系型数据库,是一个基于分布式文件存储的开源数据库系统,它将数据存储为一个文档,数据结构由键值 (key=>value) ...

    一个优秀的废人
  • XML网站地图

    对刚开始接触SEO的人来说不明白XML网站地图(sitemap.xml)是什么?XML网站地图是一种档案,你可以在XML网站地图提供网站中网页、影片和其它相关档...

    林雍岷
  • Java单体应用 - 架构模式 - 03.设计模式-02.抽象工厂模式

    原文地址:http://www.work100.net/training/monolithic-architecture-design-patterns-abs...

    光束云
  • 持续集成良好实践 v0.2

    本文标题之所以没有使用“最佳实践”,而是使用了“良好实践”,是因为下面每个实践在各个背景不同的团队落地时,都有可改进的空间。

    吾真本
  • 解决网站快照内容被篡改跳转被挂马的问题

    首先请各位网站运营者,检查下网站从百度点击进去,是否跳转到了恶意网站上了,直接输入网址则不会跳转的这个情况。再一个查看网站在百度里的首页快照是否是自身网站的内容...

    网站安全专家
  • 基于生长的棋盘格角点检测方法--(1)原理介绍

    前言 棋盘格中角点检测方法是相机标定中必不可少的步骤之一。Opencv中的函数 bool findChessboardCorners(InputArray im...

    用户1150922
  • SpringBoot 系列教程 web 篇之自定义请求匹配条件 RequestCondition

    在 spring mvc 中,我们知道用户发起的请求可以通过 url 匹配到我们通过@RequestMapping定义的服务端点上;不知道有几个问题大家是否有过...

    一灰灰blog

扫码关注云+社区

领取腾讯云代金券