js keyup、keypress和keydown事件 详解

时间: 2018-12-27阅读: 1065标签: 事件

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:

  键盘按键                          对应的数码

backspace8
tab9
enter13
shift16
ctrl17
alt18
pause/break19
caps lock20
escape27
page up33
Space32
page down34
end35
home36
arrow left37
arrow up38
arrow right39
arrow down40
insert45
delete46
048
149
250
351
452
553
654
755
856
957
a65
b66
c67
d68
e69
f70
g71
h72
i73
j74
k75
l76
m77
n78
o79
p80
q81
r82
s83
t84
u85
v86
w87
x88
y89
z90
left window key91
right window key92
select key93
numpad 096
numpad 197
numpad 298
numpad 399
numpad 4100
numpad 5101
numpad 6102
numpad 7103
numpad 8104
numpad 9105
multiply106
add107
subtract109
decimal point110
divide111
f1112
f2113
f3114
f4115
f5116
f6117
f7118
f8119
f9120
f10121
f1
站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/1708

关闭

JavaScript 和 Node.js 中的“事件驱动”是什么意思?

事件驱动架构是建立在软件开发中一种通用模式上的,这种模式被称为发布-订阅或观察者模式。在事件驱动架构中,至少有两个参与者:主题(subject)和观察者(observer)。

Js事件循环机制 Event loop

队列的特征先进先出;js是单线程的,任务都是排队执行,不会同步执行对个任务;js分为同步(赋值,循环,分支语句)和异步(ajax,dom事件,定时器);事件循环机制

jQuery 的58种事件方法你都用过了吗?

jQuery 事件方法:事件方法触发或将函数附加到所选元素的事件处理程序。下表列出了用于处理事件的所有jQuery方法。blur()附加/触发模糊事件;change()附加/触发更改事件

Js事件传播流程

js事件传播流程主要分三个阶段:事件捕获阶段、处于目标阶段、事件冒泡阶段。在我们平常用的addEventListener方法中,一般只会用到两个参数,一个是需要绑定的事件,另一个是触发事件后要执行的函数

事件委托以及在 angular & vue & react 中的应用

事件委托利用了事件冒泡,只指定一个 event handler,就可以管理某一类型的所有事件。比如 click 事件会一直冒泡到 document 层次,也就是我们可以为整个页面指定一个onclick handler, 而不必给每一个可单击的元素分别添加 event handler

网页浏览器缩放监听

这里的缩放不是指resize事件(改变浏览器窗口大小),而是指浏览器本身的缩放功能,一般使用以下方式进行缩放:ctrl配合鼠标滚轮;ctrl配合-/+/0进行缩放。

js事件委托(事件代理)

js中事件冒泡我们知道,子元素身上的事件会冒泡到父元素身上,事件代理就是本来加载子元素身上的事件,加在其父元素身上,其问起产生了,那么多的子元素怎么区分事件本应该是哪个子元素的。 答案就是event对象记录的事件源

事件循环以及vue.nextTick的应用

本文之所以叫宏任务、宏任务队列、微任务队列、微任务,只是将两者区分开来,一轮事件循环只取一个宏任务,宏任务中的同步代码执行完后,就依次从前往后执行微任务队列中的微任务

css3 pointer-events(阻止hover、active、onclick等触发事件)

pointer-events CSS 属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target。

jquery使用on()方法绑定的事件被执行多次的问题

jQuery用on()方法绑定了事件之后,在代码执行过程中,可能会遇到事件被多次执行的情况。本来以为是事件冒泡的问题,后来发现是on()方法的特性引起的问题。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!