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（）函数。

Answer 2

这就是他们应该工作的方式，看看this文件！

基本上就是这样：

在IE上，当通过Tab键到达单选按钮组时，最初选择的按钮被聚焦，虚线矩形表示这一点。您可以使用箭头键在组内的按钮之间移动; “向下”和“向右”箭头在组内向前移动，“向上”和“向左”箭头向后移动。移动到按钮后，该按钮会被选中（并且检查的组中的按钮将被取消选中）。

在Netscape上，情况有所不同。通过Tab键到达一组单选按钮时，第一个按钮将获得焦点。您可以通过Tab键在组内向前移动。移动到该按钮不会改变设置。使用空格键或Enter键检查按钮。

Answer 3

我通过点击输入后模糊输入来解决这个问题。

至少通过这种方式，如果您使用制表符/空格/箭头键进行导航，则不会弄乱用户。如果他们点击它，他们将不太可能使用箭头键选择下一个选项。

Jquery的：

$('.quiz input:radio').click(function(){ $(this).blur()})

单选按钮键盘陷阱

3 个答案: