javascript - 单选按钮键盘陷阱

Question

我正在创建多项选择题练习，但遇到了键盘可访问性方面的问题。基本上，用户无法通过键盘循环浏览单选按钮列表。当“焦点”光标位于单选按钮上并且用户按下箭头键移动到下一个单选按钮时，会发生键盘陷阱。不是简单地聚焦它，而是选择单选按钮，从而显示答案。使用键盘浏览单选按钮时，如何停止选中它们？

HTML 标记:

<div id="contentWrapper">
<p class="instructions">Click on the correct answer.</p>

<ol start="49">
    <!-- Start of multiple choice question -->
    <li class="multipleChoice gradedQuestion">
        <p class="question">If you receive a request for an extension from a trader, you should:</p>
        <input type="hidden" name="questionNumber" value="49">
        <ul>
            <li>
                <div class="answerOption"><label for="question49A">Refer to IP 13; if the original requirements are still being met, approve the extension.</label></div>
                <div class="inputAndIdContainer"><input type="radio" name="question49" value="0" id="question49A"> A.</div>
            </li>
            <li>
                <div class="answerOption"><label for="question49B">Refer to IP 20; if the original requirements are still being met, approve the extension.</label></div>


        <div class="inputAndIdContainer"><input type="radio" name="question49" value="0" id="question49B"> B.</div>
        </li>
        <li>
            <div class="answerOption"><label for="question49C">Refer to FW1; if the original requirements are still being met, approve the extension.</label></div>
            <div class="inputAndIdContainer"><input type="radio" name="question49" value="1" id="question49C"> C.</div>
        </li>
    </ul>
    <div class="feedback">
        <div class="answeredCorrectly">Correct</div>
        <div class="answeredIncorrectly">Incorrect</div>
        <div class="answer">
            <strong>Answer:</strong> C - Refer to FW1.
        </div>
    </div>
</li>
<!-- End of multiple choice question -->

Answer 1

简短的回答是你不能，这不是键盘陷阱。这就是 radio 的本质。

如果它们被组合在一起(name 属性)，你就跳进去；按空格键可以选择第一项，使用箭头键可以选择下一项。你应该写你的JS来观察焦点进入组然后离开。离开后，显示 <div id="feedback">或者制作一个按钮来显示它。

编辑 关于您的其他帖子，您可能需要添加一个类似于 .click() 的 .focus() 函数。