html body keydown,HTML DOM-->键盘事件:keydown/keyup/keypress

本文介绍了浏览器中的键盘事件如keydown、keyup和keypress的使用,指出keypress在某些浏览器中的限制,并提供了示例代码演示如何检测不同按键状态。重点在于选择keydown替代keypress以处理所有按键,包括非功能键。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.定义和使用

keydown:某个键盘按键被按下

keyup:某个键盘按键被松开

keypress:个键盘按键被按下并松开

注意:

1. 键盘事件的属性不能用于以下元素: , ,
, , , , , , ,

2.keypress 事件在所有浏览器中不能触发所有按键(例如:ALT, CTRL, SHIFT, ESC) 。如果只对用户是否已经按下一个按键检测, 可以使用 keydown 取代, keydown被所有按键触发。

举例:

js_excise

div{

width: 100px;

height: 100px;

background-color: aqua;

}

//所有键盘按下触发

document.addEventListener('keydown',function(e){

var event = e || window.event // e:非IE浏览器使用,window.event是IE浏览器使用

console.log(event.shiftKey,event.altKey,event.ctrlKey,event.key,event.keyCode)

},false)

//所有键盘抬起触发

document.addEventListener('keyup',function(e){

var event = e || window.event // e:非IE浏览器使用,window.event是IE浏览器使用

console.log(event.shiftKey,event.altKey,event.ctrlKey,event.key,event.keyCode)

},false)

//非功能按键按下触发

document.addEventListener('keypress',function(e){

var event = e || window.event // e:非IE浏览器使用,window.event是IE浏览器使用

console.log(event.shiftKey,event.altKey,event.ctrlKey,event.key,event.keyCode)

},false)

输出:

229618a77255a479f24f3736f700629a.png

标签:浏览器,DOM,keypress,keyup,键盘,window,按键,IE,event

来源: https://www.cnblogs.com/abner-pan/p/12805675.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值