keyup
event is fired when a key is released.
| 冒泡 | Yes |
|---|---|
| 可取消 | Yes |
| 接口 |
KeyboardEvent
|
| 事件处理程序特性 |
onkeyup
|
keydown
and
keyup
events provide a code indicating which key is pressed, while
keypress
indicates which
character
was entered. For example, a lowercase "a" will be reported as 65 by
keydown
and
keyup
, but as 97 by
keypress
. An uppercase "A" is reported as 65 by all events.
注意:
If you're looking for a way to react to changes in an input's value, you should use the
input
event
. Some changes are not detectable by
keyup
, for example pasting text from the context menu in a text input.
Since Firefox 65, the
keydown
and
keyup
events are now fired during IME composition, to improve cross-browser compatibility for CJKT users (
bug 354358
, also see
keydown and keyup events are now fired during IME composition
for more useful details). To ignore all
keyup
events that are part of composition, do something like this (229 is a special value set for a
keyCode
relating to an event that has been processed by an IME):
eventTarget.addEventListener("keyup", event => {
if (event.isComposing || event.keyCode === 229) {
return;
}
// do something
});
This example logs the
KeyboardEvent.code
value whenever you release a key.
<p>Focus the IFrame first (e.g. by clicking in it), then try pressing some keys.</p> <p id="log"></p>
const log = document.getElementById('log');
document.addEventListener('keyup', logKey);
function logKey(e) {
log.textContent += ` ${e.code}`;
}
document.onkeyup = logKey;
| 规范 | 状态 |
|---|---|
| UI Events | 工作草案 |
| 桌面 | 移动 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
keyup
event
|
Chrome 1 | Edge 12 | Firefox 14 | IE 9 | Opera 11.6 | Safari 2 | WebView Android 1 | Chrome Android 18 | Firefox Android 14 | Opera Android 12 | Safari iOS 1 | Samsung Internet Android 1.0 |
完整支持
Document
alinkColor
all
anchors
applets
bgColor
body
characterSet
childElementCount
children
compatMode
contentType
currentScript
defaultView
designMode
dir
doctype
documentElement
documentURI
documentURIObject
domain
domConfig
嵌入
fgColor
firstElementChild
forms
fullscreen
fullscreenEnabled
head
height
hidden
图像
实现
lastElementChild
lastModified
lastStyleSheetSet
linkColor
链接
location
mozSyntheticDocument
onabort
onafterscriptexecute
onanimationcancel
onanimationend
onanimationiteration
onauxclick
onbeforescriptexecute
onblur
oncancel
oncanplay
oncanplaythrough
onchange
onclick
onclose
oncontextmenu
oncuechange
ondblclick
ondurationchange
onended
onerror
onfocus
onformdata
onfullscreenchange
onfullscreenerror
ongotpointercapture
oninput
oninvalid
onkeydown
onkeypress
onkeyup
onload
onloadeddata
onloadedmetadata
onloadend
onloadstart
onlostpointercapture
onmousedown
onmouseenter
onmouseleave
onmousemove
onmouseout
onmouseover
onmouseup
onoffline
ononline
onpause
onplay
onplaying
onpointercancel
onpointerdown
onpointerenter
onpointerleave
onpointermove
onpointerout
onpointerover
onpointerup
onreset
onresize
onscroll
onselect
onselectionchange
onselectstart
onsubmit
ontouchcancel
ontouchstart
ontransitioncancel
ontransitionend
onvisibilitychange
onwheel
origin
plugins
popupNode
preferredStyleSheetSet
readyState
referrer
rootElement
脚本
scrollingElement
selectedStyleSheetSet
styleSheetSets
timeline
title
tooltipNode
URL
visibilityState
vlinkColor
width
xmlEncoding
xmlVersion
adoptNode()
append()
caretRangeFromPoint()
clear()
close()
createAttribute()
createCDATASection()
createComment()
createDocumentFragment()
createElement()
createElementNS()
createEntityReference()
createEvent()
createExpression()
createExpression()
createNodeIterator()
createNSResolver()
createNSResolver()
createProcessingInstruction()
createRange()
createTextNode()
createTouch()
createTouchList()
createTreeWalker()
enableStyleSheetsForSet()
evaluate()
evaluate()
execCommand()
exitFullscreen()
exitPointerLock()
getAnimations()
getBoxObjectFor()
getElementById()
getElementsByClassName()
getElementsByName()
getElementsByTagName()
getElementsByTagNameNS()
hasFocus()
hasStorageAccess()
importNode()
mozSetImageElement()
open()
prepend()
queryCommandEnabled()
queryCommandSupported()
querySelector()
querySelector()
querySelectorAll()
querySelectorAll()
registerElement()
releaseCapture()
replaceChildren()
requestStorageAccess()
write()
writeln()
animationcancel
animationend
animationiteration
animationstart
copy
cut
DOMContentLoaded
drag
dragend
dragenter
dragexit
dragleave
dragover
dragstart
drop
fullscreenchange
fullscreenerror
gotpointercapture
keydown
keypress
keyup
lostpointercapture
paste
pointercancel
pointerdown
pointerenter
pointerleave
pointerlockchange
pointerlockerror
pointermove
pointerout
pointerover
pointerup
readystatechange
scroll
selectionchange
selectstart
touchcancel
touchend
touchmove
touchstart
transitioncancel
transitionend
transitionrun
transitionstart
visibilitychange
wheel