js keyup、keypress和keydown事件 详解

更新日期: 2018-12-27阅读量: 2157标签: 事件

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

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

浏览器事件之事件流

事件流描述的是从页面中接收事件的顺序。但是IE和Netscape却提出了两个完全相反的事件流,分别是事件冒泡流和事件捕获流。E的事件流称为事件冒泡,从最具体的元素开始,然后逐渐向上传播到文档节点。

微信小程序中事件

Touchcancle: 在某些特定场景下才会触发(比如来电打断等);​ tap事件和longpress事件通常只会触发其中一个;事件传递参数当视图层发生事件时,某些情况需要事件携带一些参数到执行的函数中, 这个时候就可以通过

通过事件实时获取<select>标签选项时需要注意的问题

今天编写了一个下拉框事件,功能是根据用户选择不同省份,另一个下拉框实时更新出省份所在的城市。我编写了一个简单的测试用例后发现,不能简单地通过获取元素的值来进行判断,因为如果写出类似于

js 彻底搞懂事件循环机制 Event Loop

所谓单线程,无非就是同步队列和异步队列,js代码是自上向下执行的,在主线程中立即执行的就是同步任务,比如简单的逻辑操作及函数,而异步任务不会立马立马执行,会挪步放到到异步队列中,比如ajax、promise、事件、计时器等等。

jquery的bind跟on绑定事件的区别

Jquery的bind跟on绑定事件的区别:主要是事件冒泡(事件代理);jquery文档中bind和on函数绑定事件的用法:.bind(events [,eventData], handler);.on(events [,selector] [,data], handler)

HTML5 手势检测原理和实现

随着 Hybrid 应用的丰富,HTML5 工程师们已经不满足于把桌面端体验简单移植到移动端,他们觊觎移动原生应用人性化的操作体验,特别是原生应用与生俱来的丰富的手势系统。HTML5 没有提供开箱即用的手势系统

Js事件的截获

利用事件的捕获阶段,添加事件。再利用触发事件元素(e.target)来判断(根据一定的标识或者某些特征)是否是我们需要劫持的dom。

Js常用事件有哪些?

avaScript使我们有能力创建动态页面,而事件是可以被 JavaScript 侦测到的行为。那么在javascript中常用事件有哪些?单击事件:onclick。用户单击鼠标按键时产生的事件,同时。nclick指定的事件处理程序或代码将被调用执行.

如何实现动态添加的元素添加点击事件

在页面开发过程中常常遇到需要动态添加元素,然后给这一元素绑定相关事件的情况,这种情况下一般需要给元素加上相关属性,然后写这些元素的事件函数即可。

d3 zoom 抖动问题事件

直接对元素添加 zoom事件 会有很大得抖动,查文档 看代码之后发现是 由于元素在不断变化, 所以计算基础值也不不断变化,所以会导致计算出来得值 忽大忽小 从而造成抖动

点击更多...

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