js keyup、keypress和keydown事件  详解

js keyup、keypress和keydown事件都是有关于键盘的事件

当一个按键被pressed 或released在每一个现代浏览器中,都可能有三种客户端事件。

  1. keydown event
  2. keypress event
  3. keyup event

keydown事件发生在键盘的键被按下的时候,接下来触发keypress事件。 keyup 事件在按键被释放的时候触发。

这三个事件在页面中的使用方法如下例:

<input id="testkeyevent" name="testkeyevent"  onKeyUp="keyup()" />

<input id="testkeyevent" name="testkeyevent"   onkeypress="keypress()" />

<input id="testkeyevent" name="testkeyevent"   onkeydown="keydown()" />

对应的js函数:

function keyup(){ ...}

function keypress(){ ...}

function keydown(){ ...}

注意:

  1. KeyDown触发后,不一定触发KeyUp,当KeyDown 按下后,拖动鼠标,那么将不会触发KeyUp事件。
  2. KeyPress主要用来捕获数字(注意:包括Shift+数字的符号)、字母(注意:包括大小写)、小键盘等除了F1-12、SHIFT、Alt、Ctrl、Insert、Home、PgUp、Delete、End、PgDn、ScrollLock、Pause、NumLock、{菜单键}、{开始键}和方向键外的ANSI字符
  3. KeyDown 和KeyUp 通常可以捕获键盘除了PrScrn所有按键(这里不讨论特殊键盘的特殊键)
  4. KeyPress 只能捕获单个字符
  5. KeyDown 和KeyUp 可以捕获组合键。
  6. KeyPress 可以捕获单个字符的大小写
  7. KeyDown和KeyUp 对于单个字符捕获的KeyValue 都是一个值,也就是不能判断单个字符的大小写。
  8. KeyPress 不区分小键盘和主键盘的数字字符。
  9. KeyDown 和KeyUp 区分小键盘和主键盘的数字字符。
  10. 其中PrScrn 按键KeyPress、KeyDown和KeyUp 都不能捕获。
  11. 在使用键盘的时候,通常会使用到CTRL+SHIFT+ALT 类似的组合键功能。对于此,我们如何来判定?

    通过KeyUp 事件能够来处理(这里说明一下为什么不用KeyDown,因为在判定KeyDown的时候,CTRL、SHIFT和ALT 属于一直按下状态,然后再加另外一个键是不能准确捕获组合键,所以使用KeyDown 是不能准确判断出的,要通过KeyUp 事件来判定 )

    这里简单的列举出CTRL+其它键的组合判定代码:


    private void Form3_KeyUp(object sender, KeyEventArgs e)
    {
    if (e.Control)
    {
    MessageBox.Show("KeyUp:Ctrl+" + e.KeyValue.ToString());
    }
    }

  12. 捕获PrScrn按键事件

    通过一种钩子的方式可以判定PrScrn 按键事件,钩子可以获取任何键盘事件。

以下是一些键盘上的键对应的Code:以下是一些键盘上的键对应的Code:

  键盘按键                          对应的数码

backspace 8
tab 9
enter 13
shift 16
ctrl 17
alt 18
pause/break 19
caps lock 20
escape 27
page up 33
Space 32
page down 34
end 35
home 36
arrow left 37
arrow up 38
arrow right 39
arrow down 40
insert 45
delete 46
0 48
1 49
2 50
3 51
4 52
5 53
6 54
7 55
8 56
9 57
a 65
b 66
c 67
d 68
e 69
f 70
g 71
h 72
i 73
j 74
k 75
l 76
m 77
n 78
o 79
p 80
q 81
r 82
s 83
t 84
u 85
v 86
w 87
x 88
y 89
z 90
left window key 91
right window key 92
select key 93
numpad 0 96
numpad 1 97
numpad 2 98
numpad 3 99
numpad 4 100
numpad 5 101
numpad 6 102
numpad 7 103
numpad 8 104
numpad 9 105
multiply 106
add 107
subtract 109
decimal point 110
divide 111
f1 112
f2 113
f3 114
f4 115
f5 116
f6 117
f7 118
f8 119
f9 120
f10 121
f1

js keyup、keypress和keydown事件 详解的更多相关文章

  1. JS之onunload、onbeforeunload事件详解

    简介 onunload,onbeforeunload都是在刷新或关闭时调用,可以在<script>脚本中通过 window.onunload来调用.区别在于onbeforeunload在o ...

  2. js keyup、keypress和keydown事件

    js keyup.keypress和keydown事件都是有关于键盘的事件 当一个按键被pressed 或released在每一个现代浏览器中,都可能有三种客户端事件. keydown event k ...

  3. js中鼠标滚轮事件详解

    js中鼠标滚轮事件详解   (以下内容部分内容参考了http://adomas.org/javascript-mouse-wheel/ ) 之前js 仿Photoshop鼠标滚轮控制输入框取值中已使用 ...

  4. javascript 中 keyup、keypress和keydown事件

    keyup.keypress和keydown事件都是有关于键盘的事件 1. keydown事件在键盘的键被按下的时候触发,keyup 事件在按键被释放的时候触发    keydown.keypress ...

  5. 第三天:JS事件详解-事件流

    学习来源: F:\新建文件夹 (2)\HTML5开发\HTML5开发\04.JavaScript基础\6.JavaScript事件详解 学习内容:  1)基础概念 2)举例说明: 代码如上,如果用事件 ...

  6. keypress和keydown事件及keyCode和keyChar

    二:keypress和keydown事件: 现只在IE10.chrome(版本 32.0.1700.107 m).firefox(25.0.1)中测试了.   IE8 chrome firefox $ ...

  7. JS中的函数节流throttle详解和优化

    JS中的函数节流throttle详解和优化在前端开发中,有时会为页面绑定resize事件,或者为一个页面元素绑定拖拽事件(mousemove),这种事件有一个特点,在一个正常的操作中,有可能在一个短的 ...

  8. JavaScript事件详解-jQuery的事件实现(三)

    正文 本文所涉及到的jQuery版本是3.1.1,可以在压缩包中找到event模块.该篇算是阅读笔记,jQuery代码太长.... Dean Edward的addEvent.js 相对于zepto的e ...

  9. JAVASCRIPT事件详解-------原生事件基础....

    javaScirpt事件详解-原生事件基础(一)   事件 JavaScript与HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间,通过监听特定事件的发生,你能 ...

随机推荐

  1. C++(十五) — sizeof 运算符

    1.基本数据类型 sizeof 是一个关键字,它是一个编译时运算符,用于判断变量或数据类型的字节大小. sizeof 运算符可用于获取类.结构.共用体和其他用户自定义数据类型的大小. 使用 sizeo ...

  2. Educational Codeforces Round 38

    http://codeforces.com/contest/938 A:sb题 //#pragma comment(linker, "/stack:200000000") //#p ...

  3. Node.js小白开路(一)-- fs篇

    文件操作在我们的日常功能模块之中是十分的常见的内容,nodeJS也不例外的为我们提供了之一操作内容,当时在我们了解文件操作的之前我们先来了解一下链接. 连接可以理解成为一个纸箱相关文件内容的地址,其主 ...

  4. [转载]java在线比较两个word文件

    一.项目背景 开发文档管理系统或OA办公系统的时候,实现在线处理word文档的功能比较容易,但是也经常会有客户提出文档版本管理的需求,这就需要同时在线打开两个word文件,对比两个不同版本的word文 ...

  5. 【ccf 2017/12/4】行车路线(dijkstra变形)

    问题描述 小明和小芳出去乡村玩,小明负责开车,小芳来导航. 小芳将可能的道路分为大道和小道.大道比较好走,每走1公里小明会增加1的疲劳度.小道不好走,如果连续走小道,小明的疲劳值会快速增加,连续走s公 ...

  6. springboot项目执行controller方法时进入慢的问题

    今天在部署springboot项目到阿里云时,出现登录方法执行特别慢的问题.刚开始以为是卡死了,等了3,4分钟才进去,最后会出现如下信息: 2018-01-28 15:38:36.958 INFO 4 ...

  7. golang实现图片上传

    golang实现图片上传 该代码为使用beego实现前后端图片上传.话不多说,直接上代码. 1.前端代码 html代码: <div class="col-5 f-l text text ...

  8. (三十六)类数组对象arguments

    类数组对象:arguments 在函数调用时,我们总能见到arguments这个对象,它具体是用来干什么的呢?感觉逼格非常高呢 函数在使用时,我们总会位函数传入各种参数,arguments会将参数储存 ...

  9. v-if和v-show的区别

    v-if 是“真实”的条件渲染,因为它会确保条件块(conditional block)在切换的过程中,完整地销毁(destroy)和重新创建(re-create)条件块内的事件监听器和子组件. v- ...

  10. 深入了解zookeeper(三)

    一.ZooKeeper 的实现 1.1 ZooKeeper处理单点故障 我们知道可以通过ZooKeeper对分布式系统进行Master选举,来解决分布式系统的单点故障,如图所示. 那么我们继续分析一下 ...