OnKeyPress事件和Javascript检测键盘输入

简介: 对于有些时候,我们需要检测用户键盘输入的键盘信息,来处理一些相应的事件。 这里田子建议使用OnKeyPress=“”事件来处理。相类似的还有OnKeyUp和OnKeyDown事件,这些田子个人认为都不是特别的理想化。

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

这里田子建议使用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]

img_fa0be433d68c8212b2b0b3b1a564ccb1.png
如果本文对你有所帮助,请打赏——1元就足够感动我:)
支付宝打赏 微信打赏
联系邮箱:intdb@qq.com
我的GitHub: https://github.com/vipstone
关注公众号: img_9bde0f31ac4a0eca10b1bd7414b78faf.png


作者: 王磊
出处: http://vipstone.cnblogs.com/
本文版权归作者和博客园共有,欢迎转载,请标明出处。

相关文章
|
3天前
|
算法 JavaScript 前端开发
在JavaScript中实现基本的碰撞检测算法,我们通常会用到矩形碰撞检测,也就是AABB(Axis-Aligned Bounding Box)碰撞检测
【6月更文挑战第16天】JavaScript中的基本碰撞检测涉及AABB(轴对齐边界框)方法,常用于2D游戏。`Rectangle`类定义了矩形的属性,并包含一个`collidesWith`方法,通过比较边界来检测碰撞。若两矩形无重叠部分,四个条件(关于边界相对位置)均需满足。此基础算法适用于简单场景,复杂情况可能需采用更高级的检测技术或物理引擎库。
34 6
|
4天前
|
前端开发 JavaScript 数据处理
在JavaScript中,异步函数是指那些不会立即执行完毕,而是会在未来的某个时间点(比如某个操作完成后,或者某个事件触发后)才完成其执行的函数
【6月更文挑战第15天】JavaScript中的异步函数用于处理非同步任务,如网络请求或定时操作。它们使用回调、Promise或async/await。
18 7
|
1天前
|
JavaScript 前端开发
JavaScript弹窗事件
JavaScript弹窗事件
|
1天前
|
JavaScript 前端开发
JS实现移动端的轮播图滑动事件
JS实现移动端的轮播图滑动事件
|
2天前
|
数据采集 JavaScript 前端开发
理解并应用:JavaScript响应式编程与事件驱动编程的差异
了解JavaScript的响应式编程与事件驱动编程至关重要。事件驱动编程基于事件触发函数执行,如用户交互或系统事件。响应式编程则关注数据流变化,利用Observables自动响应更新。在爬虫代理IP的Web Scraping示例中,两者分别通过axios和rxjs显示了数据抓取的不同处理方式。掌握这两者能提升异步操作的效率和代码质量。
理解并应用:JavaScript响应式编程与事件驱动编程的差异
|
3天前
|
JavaScript 前端开发 算法
在JavaScript中,AABB矩形碰撞检测常用于2D游戏
【6月更文挑战第16天】在JavaScript中,AABB矩形碰撞检测常用于2D游戏。通过创建`Rectangle`类并定义`collidesWith`方法检查边界交集,简单高效地判断两个矩形是否相撞。
27 5
|
3天前
|
JavaScript 前端开发 算法
Box2D(现在通常称为Box2D.js或者其WebAssembly版本,Emscripten Box2D)是一个流行的2D物理引擎,用于模拟刚体动力学、碰撞检测与响应以及关节约束等物理现象
【6月更文挑战第16天】Box2D.js,基于C++的2D物理引擎,经Emscripten编译为WebAssembly,用于JavaScript游戏中的真实物理模拟,包含碰撞检测和关节约束。它提供高效的碰撞检测,易于扩展和定制物理属性。使用步骤涉及初始化世界、创建刚体、添加碰撞形状、模拟物理及处理碰撞事件。物理引擎虽提升逼真度,但也增加复杂性和性能需求。其他选项如p2.js、matter.js和ammo.js也可供选择。
45 8
|
5天前
|
JavaScript 前端开发
JS的监听事件
JS的监听事件
|
5天前
|
JavaScript 前端开发
JavaScript事件
JavaScript事件
|
21天前
|
JavaScript 前端开发
JavaScript实现通过键盘弹钢琴的效果
JavaScript实现通过键盘弹钢琴的效果
17 0

热门文章

最新文章