javascript - 如何使用 JavaScript 或 jQuery 中的键盘快捷键触发不同的按钮事件？

Question

我有一个多项选择题列表:

<div class="question active">
    <p>The first counting tool was the _____.</p>
    <button class="btn-a">A) Stepped Reckoned</button>
    <button class="btn-b">B) Abacus</button>
    <button class="btn-c">C) Aba Zaba</button>
    <button class="btn-d">D) Punch Card</button>
</div>
<div class="question">
    <p>Who founded IBM and was responsible for tabulating the US Census with a punch card tabulator in only six weeks?</p>
    <button class="btn-a">A) Jacquard</button>
    <button class="btn-b">B) Hollerith</button>
    <button class="btn-c">C) Mark I</button>
    <button class="btn-d">D) Babbage</button>
</div>

如何触发这些按钮中的每一个以使用键盘上的相应字母提交？

键盘应该只适用于 .active 问题。

---

奖励:

是否可以让两个键触发问题？例如，由于 ABCD 在键盘周围间隔开，因此允许 QWER 或 JKL; 对应于 ABCD< 也可能会有帮助 使单手键盘输入变得容易。

Answer 1

使用 keyup 事件，您可以监听用户释放按键。然后你可以将它翻译成一个字母(或箭头键，在我的例子中)，并访问适当的问题/按钮。你可以尝试这样的事情:

$(document).ready(function () {
    var $questions = $("div.question"),
        $activeQuestion = function () {
            return $questions.filter(".active");
        },
        $prevQuestion = function (setActive) {
            var $prev;
            $prev = $activeQuestion().prevAll(".question").first();
            if ($prev.length === 0) {
                $prev = $questions.last();
            }
            return $prev;
        },
        $nextQuestion = function () {
            var $next;
            $next = $activeQuestion().nextAll(".question").first();
            if ($next.length === 0) {
                $next = $questions.first();
            }
            return $next;
        };

    $(document).on("keyup", function (e) {
        var key, character, $active, $next, $prev;
        key = e.which;
        switch (key) {
            case 37:
            case 38:
                $prev = $prevQuestion();
                $questions.removeClass("active");
                $prev.addClass("active");
                break;
            case 39:
            case 40:
                $next = $nextQuestion();
                $questions.removeClass("active");
                $next.addClass("active");
                break;
            default:
                character = String.fromCharCode(key).toLowerCase();
                $active = $activeQuestion();
                $active.find("button").removeClass("selected").filter(".btn-" + character).addClass("selected");
                break;
        }
    });
});

演示: http://jsfiddle.net/wdXkB/1/

我想得有点远，但我添加了使用箭头键移动到下一个问题(向下和向右箭头)或上一个问题(向上和向左箭头)的功能。