Element: keyup event

keyup 事件在按键被松开时触发。

冒泡
可取消
接口 KeyboardEvent
事件处理函数属性 onkeyup

keydown 和 keyup 事件提供指出哪个键被按下的代码,而 keypress 指出哪些字符被输入。例如,小写字母 “a” 在 keydown 和 keyup 时会被报告为 65,但在 keypress 时为 97。所有事件均将大写字母 “A” 报告为 65。

从 Firefox 65 开始,keyup 和 keydown 事件在 IME 编辑时也会被触发,以提升 CJKT 用户的跨浏览器兼容性(bug 354358,另请参阅 keydown and keyup events are now fired during IME composition 获取更多有用的详情)。要忽略 IME 编辑时的所有 keyup 事件,请执行以下操作(229 是一个关于被 IME 加工过的事件的  keyCode 的特殊值 ):

eventTarget.addEventListener("keyup", event => {
  if (event.isComposing || event.keyCode === 229) {
    return;
  }
  // do something
});

例子

addEventListener keyup 例子

在这个例子中,每当你在 <input> 元素里松开一个键,将会打印 KeyboardEvent.code 的值。

<input placeholder="Click here, then press and release a key." size="40">
<p id="log"></p>
const input = document.querySelector('input');
const log = document.getElementById('log');

input.addEventListener('keyup', logKey);

function logKey(e) {
  log.textContent += ` ${e.code}`;
}

等效的 onkeyup

input.onkeyup = logKey;

规范

Specification Status
UI Events Working Draft

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
keyup eventChrome Full support YesEdge Full support ≤18Firefox Full support YesIE ? Opera ? Safari ? WebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android ? Safari iOS ? Samsung Internet Android Full support Yes

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown

更多