单选按钮键盘陷阱

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

简短的回答是你不能,这不是键盘陷阱.这就是收音机的本质.

如果将它们组合在一起(名称属性),则将其标记为; 按空格键,选择第一项,使用箭头键选择下一项.您应该编写JS以观察焦点以进入组然后离开.离开后,显示<div id="feedback">或按钮显示它.

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