JavaScriptでIME確定を考慮したEnterキー処理

JavaScript

2024.12.022024.12.03

概要
例

概要

JavaScriptで「Enterキーが押されたらフォームを送信する」などの処理を実装する場合、e.key === 'Enter'だけではIME変換時にも処理が実行されてしまう。

e.isComposingの値がtrueがどうかをチェックすることでIME変換時かどうかを判定することができるが、残念ながらSafariではIME変換時にe.isComposingの値がfalseになってしまう。

SafariではIME変換時にe.keyCodeの値が229になるため、Safariにも対応する場合はe.isComposingとe.keyCodeの両方の値をチェックすればよい。

ただし、e.keyCodeは非推奨となっているので、注意が必要である。
https://developer.mozilla.org/ja/docs/Web/API/KeyboardEvent/keyCode

例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<input type="text" id="hoge">
<script>
document.getElementById('hoge').onkeydown = e => {
  if (e.key !== 'Enter' || e.isComposing || e.keyCode === 229) 
    return;
  }
  alert('enter');
}
</script>
</body>
</html>