🔢
[JavaScript]大きいEnterと小さいEnterは別物であることに気づいた
タイトルは上記画像にあるような普通にキーボードにあるEnterキーと、
テンキーの右横にある小さいEnterキーのことです。
私の担当しているシステムではEnterキーを押すとフォーカスが移動する仕様があります。
経験上、このような仕様は多数のデータ入力があるシステムにおいて好まれる傾向を感じます。
キーボードから手を離さなくていいからですね。
正直なところフォーカス移動ならTabだろうと思いますが、まあそこは長年の習慣だと思います。
この仕様をJavaScriptで実現していたのですが、なんか違和感を感じて調べたところ
JavaScriptにおいてキーボードにある普通のEnterキーとテンキーの右横にある小さいEnterキーは別物であることに気づきました。
<html>
<head></head>
<body>
</body>
<script type="text/javascript">
document.querySelector('body').addEventListener('keypress', function(e) {
console.log(e.code);
})
</script>
</html>
こちらのコードで試すと、普通のEnterは「Enter」、テンキーのEnterは「NumpadEnter」であることがわかります。
今回私は
if (e.code === 'Enter')
みたいな条件でフォーカス移動を仕込んでいたので条件が足らなかった次第です。
最近はもっぱらノートパソコンで開発してるので危ないですね。
「ユーザーに合わせる」という考えに画面サイズとかだけではなく、キーボードも入れておかねばと思いました。
Discussion