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检测键盘输入相关推荐
- JavaScript - 模拟键盘输入支付密码
JavaScript - 模拟键盘输入支付密码 Max.Bai 2016-12-29 0x00: 发生了什么事 我做自动化测试的时候,需要自动化在页面上输入这个密码,什么样子的,看下面: 有没有很像支 ...
- 无阻塞实时检测键盘输入
本人小白一枚,第一次写博客,个位大佬多多指教. 之前一直使用opencv,里面的waitkey函数对于实时检测键盘输入还是比较友好.但是最近只用c++开发之后发现不会怎么实现无阻塞读取键盘输入.查资料 ...
- update与fixedupdate检测键盘输入的出现的问题
先看看二者的区别 unity默认设置中,fixedupdate调用频率为50,在这个情况下,它的调用次数一般是比update要高的. 同:当MonoBehaviour启用时,其在每一帧被调用.都是用来 ...
- python检测键盘输入termios、等待按键超时检测
试了很多方案都不行或者不好用.win10+linux可以用的方法有pygame和termios pygame方法参考:https://blog.csdn.net/qxqxqzzz/article/de ...
- 【C_socket】select检测键盘输入实现自由聊天
title: [C_socket]select检测键盘输入实现自由聊天 sticky: 3 top_img: keywords: "C,socket" cover: descrip ...
- el-input中设置onkeypress事件是否匹配正则表达式显示输入内容的格式
场景 若依前后端分离版手把手教你本地搭建环境并运行项目: 若依前后端分离版手把手教你本地搭建环境并运行项目_BADAO_LIUMANG_QIZHI的博客-CSDN博客_若依前后端分离搭建 设置el-i ...
- python检测键盘输入_python实时检测键盘输入函数的示例
在嵌入式.尤其是机器人的python编程中,经常需要实时检测用户的键盘输入来随时控制机器人,这段代码可以帮助我们提取用户输入的字符,并在按下键盘的时候作出反应. import sys import t ...
- Javascript 检测键盘按键
Javascript中 有3个事件句柄在对应键盘的输入状态:keydown.keypress和keyup. 分别对应的意思是:按键被按下(按下按键但还没有抬起).点击按键(按下并抬起按键).按键抬起( ...
- c语言检测四个方向键盘输入,如何既检测鼠标单击又检测键盘输入
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 判断鼠标单击程序 COORD pt; int ismouse() { DWORD dwMode, dwOldMode; /* 原来的模式与新模式 */ D ...
最新文章
- 数据蒋堂 | 大数据集群该不该透明化?
- 解决Jira和Confluence访问打开越来越缓慢问题
- Python基础之基本数据类型的总结
- Request获取参数封装方式
- 怎样在减少数据中心成本的同时不牺牲性能?
- SandyMandy ,绝世好BABY http://angel.mingox.com
- ghostwin10系统后不小心重新分区了,其它分区的资料如何找回
- 基于java的机房收费系统_基于Java Socket的高校机房计费管理系统
- js检查关闭浏览器方法
- ENGINE=InnoDB AUTO_INCREMENT=10 DEFAULT CHARSET=utf8;
- 创建一个Employee类
- 路由器映射,端口映射?
- 易臣督查督办全覆盖 过程全留痕 政令全通达
- mysql事件探查器_SQL2005事件探查器中的Reads数据很大是怎么回事?
- 2023年全国最新工会考试精选真题及答案10
- 我的自学全栈路(从0元自学到转行IT)
- 最简单实用的网易云爬虫!cloudmusic库带你起飞,歌曲、用户、评论信手捏来
- 入职字节外包一个月,我离职了
- idea中热部署插件JRebel最新激活方式
- 1990-2020年全国地级市公路里程
热门文章
- 沟通linux与windows的wine
- 发现保存GIF格式后相素发生变化咋办
- css优先级机制说明
- ASP.NET中常用的26个优化性能方法(1-10)
- 让UpdatePanel支持文件上传(4):数据传输与解析机制
- mysql聚簇索引 和主键的区别_[MySQL] innoDB引擎的主键与聚簇索引
- nodejs mysql模块_NodeJs使用Mysql模块实现事务处理
- vivado 如何创建工程模式_基于Vivado的FPGA高性能开发研修班2019年8月30日上海举行...
- excel填充工作日
- hadoop为什么出现