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 ο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文件的内容:

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]

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/547897.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ssh-copy-id 命令快速实现ssh远程免密登录

用ssh-copy-id将公钥复制到远程机器中 将本地公钥拷贝至 用户名为root的远程主机上 ssh-copy-id -i ~/.ssh/id_rsa.pub root192.168.150.128/usr/bin/ssh-copy-id: INFO: Source of key(s) to be installed: "/var/jenkins_home/.ssh/id_rsa.pub" /usr/bin/ssh-copy…

智慧职教云答案在哪里找_职教云网课答案在线查询,职教云答案查询,智慧职教云答案在哪里找到...

[问答题] 简述“二重证据法”及其影响。[问答题] 西方古典史学有哪些传统&#xff1f;[问答题] 古典史学的一般特征&#xff1f;[问答题] 兰克被称为西方史学的泰斗&#xff0c;他对西方史学的贡献主要表现在&#xff1a;[问答题] 中世纪史学的贡献&#xff1f;[问答题] 人类学…

Win10配置VSCode+Opencv3(C++) GCC环境

环境清单&#xff1a; win10 _64位系统 VSCode&#xff1a;官网地址 Opencv&#xff1a;3.4.5 Cmake&#xff1a;3.9.0 MinGw&#xff1a;MinGW-W64 GCC-8.1.0&#xff08;x86_64-posix-seh&#xff09; MinGW配置&#xff1a; MinGW可以在线安装&#xff0c;也可以直接…

100C之13:他该如何存款?

Table of Contents 1 问题2 分析3 解决方案4 题后语问题 假设银行一年整存零取的月息为0.63%。现在某人手中有一笔钱&#xff0c;他打算在今后的五年中每年的年底取出1000元&#xff0c;到第五年刚好取完&#xff0c;请算出他存钱时应存多少钱&#xff1f; 分析 也比较简单&am…

c#生成一组不同的随机数的方法

代码 #region生成不同随机数的方法///<summary>///生成不同随机数的方法///</summary>///<param name"min">最小值</param>///<param name"max">最大值</param>///<param name"count">取xx个</par…

python实验二报告_20172304 2019-2020-2 《Python程序设计》实验二报告

20172304 2019-2020-2 《Python程序设计》实验二报告课程&#xff1a;《Python程序设计》班级&#xff1a; 1723姓名&#xff1a; 段志轩学号&#xff1a;20172304实验教师&#xff1a;王志强实验日期&#xff1a;2020年4月15日必修/选修&#xff1a; 公选课1.实验内容设计并完…

安装minikube

下载安装 kubectl sudo curl -LO https://storage.googleapis.com/kubernetes-release/release/$(curl -s https://storage.googleapis.com/kubernetes-release/release/stable.txt)/bin/linux/amd64/kubectl && sudo chmod x kubectl && sudo mv kubectl /us…

网管必须了解的理光复印机相关故障现相之一

相信很多人都知道&#xff0c;网络管理员主要负责的是维护管理好局域网的正常运行。很有公司、企事业单位&#xff0c;IT部门负责的工作常常会包含各种周边设备的日常维护。这其中又以打印机、复印机为主。当然&#xff0c;很多时候不要求我们一定要懂得维修打印机、复印机&…

windows10 vscode 构建最强大的 Mingw C++ gcc 编译环境

工具准备 首先应该准备如下工具&#xff1a; 安装对应版本的Visual Studio Code。安装VS Code上的C扩展&#xff1a;C extension for VS Code。下载MinGW-w64&#xff0c;考虑到是外网资源&#xff0c;建议选择离线版本&#xff0c;在线安装比较慢&#xff0c;不太稳定。MinG…

mysql数据库关联练习_mysql数据库建立数据表的练习(附代码)

数据库操作和学习并不难&#xff0c;难的是如何在各种实际运用情况下编写SQL语句的实现。这个过程&#xff0c;需要大量的练习&#xff0c;那么从这里开始&#xff0c;我们来讲解实现。任务概述具体关系数据库如下&#xff1a;数据库名&#xff1a;教师数据库教师表(编号 char(…

Xml中SelectSingleNode方法中的xpath用法

最常见的XML数据类型有&#xff1a;Element, Attribute&#xff0c;Comment, Text.Element, 指形如<Name>Tom<Name>的节点。它可以包括&#xff1a;Element, Text, Comment, ProcessingInstruction, CDATA, and EntityReference.Attribute, 指在<Employee >中…

win10安装vmware tools + 无法拖拽文件解决

1、加载VMware Tools安装光盘 打开虚拟机VMware Workstation&#xff0c;启动 Ubuntu 系统 菜单栏 - 虚拟机 - 安装VMware Tools。 2、将安装文件提取到本地磁盘 打开加载的VMwareTools光盘&#xff0c;鼠标右键 VMwareTools-*.tar.gz 文件&#xff0c;提取到系统盘下的文件…

火狐最实用的几款插件介绍[含附件]

今天早上发现了FF插件的一遍文章&#xff0c;感觉非常实用&#xff0c;尤其是批量下载图片&#xff0c;以前这个是最头疼的&#xff0c;现在变得很简单了&#xff0c;开心&#xff0c;下来给大家也分享一下吧。 我总结最实用的如下&#xff1a; Firebug 前端开发利器DownThemA…

mysql 需要什么硬件配置_如何来给指定的硬件环境配置一份比较合理的MySQL配置文件-爱可生...

简介通过sysbench的oltp_read_write测试来模拟业务压力、以此来给指定的硬件环境配置一份比较合理的MySQL配置文件。环境介绍硬件配置软件环境优化层级与指导思想优化层级MySQL数据库优化可以在多个不同的层级进行&#xff0c;常见的有&#xff1a;SQL优化参数优化架构优化本文…

perl插入文本

有2个文件。a.txt和b.txt,文件内容如下cat a.txt111 222 333cat b.txtabc def要求把b文件的内容插入a文件含有222的上面。perl -e open $FH,"b.txt";while (1) {$bytesread($FH,$lines,3,length($lines));last if $bytes0};open $FH_A,"a.txt";while (<…

图片打标

在物体检测问题中&#xff0c;第一个需要解决的就是给训练集中的图片打标&#xff0c;所谓打标&#xff0c;就是用一个文件来描述图中物体的位置框坐标&#xff08;xmin&#xff0c;ymin&#xff0c;xmax&#xff0c;ymax&#xff09;&#xff0c;以定位物体的位置。 一个比较…

js时间格式化通用方法

/*** 时间工具类*//*** 获取现在的时间戳&#xff08;精确到s&#xff09;* 使用&#xff1a;new Date().nowTimestamp* type {number}*/Date.prototype.nowTimestamp Date.parse(new Date()) / 1000;/*** 时间戳转换成Date* 使用&#xff1a;new Date().timestampToDate(1493…

动态定时任务与动态生成class代码

动态定时任务 原理 采用定时任务线程池ThreadPoolTaskScheduler来实现定时任务。动态定时任务就是可以配置的&#xff0c;而不是写死在代码中。所以我们要将其写入到数据库中&#xff0c;然后暴露接口就可以进行配置比如创建、启动、结束任务。 数据库脚本 DROP TABLE IF EXIS…

docker登录mysql数据库_Docker下搭建mysql数据库

1.获取官方镜像&#xff1a;[rootCentos7 mysql]# docker pull mysql/mysql-server:latestlatest: Pulling from mysql/mysql-server1f5b026b07bc: Pull complete3d5697fc1304: Pull complete2747c84403db: Pull completedc0c445a852b: Pull completeDigest: sha256:7aba8c77f9…

LNMP与CA认证的童话故事

在前面的一篇博客中&#xff0c;我已经介绍过&#xff0c;如何通过源码编译安装LAMP&#xff0c;见教你源码编译制作LAMP详细过程 &#xff0c;这里就介绍下如何编译安装LNMP&#xff0c;以及如何在LNMP中添加ssl认证。LNMP&#xff0c;也叫做LEMP。L&#xff0c;即linux操作系…