【javaScript・jQuery】キーイベントで押されたキーを取得する

キー操作のイベントで押されたキーを取得する方法を紹介します。

押されたキーを取得するには「keydown」のイベント内で「event.key」を使います。
※「event.keyCode」は廃止されたようなので注意

[サンプル]



ソースコードを紹介します。
[index.html]

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
    <div>
        <input type="text" id="input-text" placeholder="ここでキーを打つ"></input>
    </div>
</body>
<script src="index.js"></script>
</html>

[index.js]
/**
 * 初期化処理
*/
$(function () {
    // 要素にkeydownイベントを付与
    $("#input-text").on("keydown", function (event) {
        // 引数から押されたキーを取得
        alert(event.key);
    });
});

スポンサーリンク