如何在 Firefox 和 IE 中使用键盘导航跳过隐藏的单选选项？答案

【问题标题】：How to skip a hidden radio option with keyboard navigation in Firefox and IE?如何在 Firefox 和 IE 中使用键盘导航跳过隐藏的单选选项？
【发布时间】：2019-06-15 01:33:00
【问题描述】：

更新即使在尝试了here 的建议后，也会出现以下问题。最新的代码 sn-p 演示了在 Firefox &即。

假设我有一个 Radio Group，每个单选按钮的标签都在一个 DIV 中。一旦至少有一个单选按钮获得焦点，我就使用箭头键（上/下）浏览我的单选按钮。

我的 Radio Group 中的一个单选按钮已隐藏。它位于具有display:none; 的DIV 中（但我也尝试了visibility:hidden 和position:fixed;opacity:0 作为可能的替代方案）。

我注意到在 Chrome 中，我仍然可以使用向上/向下箭头毫无问题地遍历焦点列表，但在 Firefox 和 IE 中，当焦点应该转移到隐藏的单选按钮时，我的导航会中断。

要查看此内容，请在此 sn-p 中执行以下操作：

1) 在 Firefox 或 IE 与 Chrome 中，首先用鼠标选择 Radio Button #1（在每一列中，查看每种方法）

2) 现在使用 ↓ 键导航到列表末尾：看到它在 Firefox 和 IE 中中断，但在 Chrome 中有效。该组被取消选择，您在 Firefox 和 IE 中失去焦点。

3) 你也可以倒序从头开始尝试，同样的方法会破坏。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>

<table>
<tr>
<td>
<span style="font-weight:bold;">With display:none</span>
</td>
<td>
<span style="font-weight:bold;">With visibility:hidden</span>
</td>
<td>
<span style="font-weight:bold;">With position:fixed;opacity:0;</span>
</td>

</tr>
<tr>
<td>

<div>
   <input id="opt1a" type="radio" name="group" value="option1">
   <label for="opt1a">Option 1</label>
</div>
<div>
   <input id="opt2a" type="radio" name="group" value="option2">
   <label for="opt2a">Option 2</label>
</div>
<div>
   <input id="opt3a" type="radio" name="group" value="option3">
   <label for="opt3a">Option 3</label>
</div>
<div style="display:none;">
   <input id="optSecret" type="radio" name="group" value="optionSecret">
   <label for="optSecreta">Secret Option</label>
    
</div>
<div>
   <input id="opt5a" type="radio" name="group" value="option5">
   <label for="opt5a">Option 5</label>
</div>

</td>

<td>
<div>
   <input id="opt1b" type="radio" name="group2" value="option1">
   <label for="opt1b">Option 1</label>
</div>
<div>
   <input id="opt2b" type="radio" name="group2" value="option2">
   <label for="opt2b">Option 2</label>
</div>
<div>
   <input id="opt3b" type="radio" name="group2" value="option3">
   <label for="opt3b">Option 3</label>
</div>
<div style="visibility:hidden;">
   <input id="optSecretb" type="radio" name="group2" value="optionSecret">
   <label for="optSecretb">Secret Option</label>
    
</div>
<div>
   <input id="opt5b" type="radio" name="group2" value="option5">
   <label for="opt5b">Option 5</label>
</div>
</td>

<td>
<div>
   <input id="opt1c" type="radio" name="group3" value="option1">
   <label for="opt1c">Option 1</label>
</div>
<div>
   <input id="opt2c" type="radio" name="group3" value="option2">
   <label for="opt2c">Option 2</label>
</div>
<div>
   <input id="opt3c" type="radio" name="group3" value="option3">
   <label for="opt3c">Option 3</label>
</div>
<div style="position:fixed;opacity:0;">
   <input id="optSecretc" type="radio" name="group3" value="optionSecret">
   <label for="optSecretc">Secret Option</label>
    
</div>
<div>
   <input id="opt5c" type="radio" name="group3" value="option5">
   <label for="opt5c">Option 5</label>
</div>
</td>

</tr>
</table>

状态：

display:none; 打破了隐藏单选按钮的循环，但折叠了空间；
visibility:hidden 打破了隐藏单选按钮的循环，但保留了空间；
position:fixed;opacity:0 打破循环一次（临时陷阱），但在按向上/向下箭头继续后恢复。但正常的骑行仍然被打破。

【问题讨论】：

这方面有什么更新吗？不幸的是，在 IE 中也是同样的情况
我不知道为什么会出现这种情况（我戳了几个可能知道的人），但我知道这被认为是不好的做法A11Y 担心用display: none 隐藏表单元素，部分原因就是这个原因。标记副本中的解决方案是要走的路。
不，该线程中的建议不起作用。 visibility:hidden 给出了相同的行为，只是占用了空间。 position:fixed;opacity:0; 保持循环，但在该单选按钮中存在暂时丢失的陷阱，因此您确实会失去焦点，然后必须按下两次。如果我们可以重新打开线程，我将能够展示这一点。您能否删除您的“重复”名称并允许我发布更多信息，这个问题仍然悬而未决。
谢谢，我更新了我的答案，你可以看到现在展示的所有选项——仍然没有解决方案。我解释了状态。
我重新打开了这个问题并调整了它的标题以更直接地反映你的情况。希望您能得到解决方案！

标签： html css internet-explorer firefox radio-button

【解决方案1】：

我最近遇到了这个问题，我想知道如果您在要隐藏的单选按钮上将 disabled 属性设置为 true，同时设置 display: none，您将能够使用向上/向下箭头键循环浏览同一单选按钮组中显示的单选按钮，不会出现问题。这适用于 Firefox、Chrome 和 IE 11（不确定它是否适用于旧版本的 IE）。

【讨论】：

【解决方案2】：

对于遇到此问题并需要一种解决方案来一次跳过多个隐藏收音机的人，就像我一样，我修改了接受的答案以适应跳过多个隐藏收音机。

$("#container").on('keydown', 'input', function(e) {

        var groupname = $(this).attr('name');
        var group = $('[name="' + groupname +  '"]:visible');
        var groupindex = group.index($(this));
        var groupsize = group.length;

        // For Down Arrow, if subsequent input in group is hidden, focus the one after it (wrap around if necessary)
        if (e.keyCode == 40) {
            e.preventDefault();
            group.eq((groupindex + 1) % groupsize).focus();
            group.eq((groupindex + 1) % groupsize).prop('checked', true);
            group.eq((groupindex + 1) % groupsize).trigger('change'); // Trigger Change Event manually for any dependencies
            return false;
        }
        // For Up Arrow, if preceding input in group is hidden, focus and select the one before it (wrap around if necessary)
        else if (e.keyCode == 38 && group.eq(groupindex - 1).length) {
            e.preventDefault();
            group.eq((groupindex - 1) % groupsize).focus();
            group.eq((groupindex - 1) % groupsize).prop('checked', true);
            group.eq((groupindex - 1) % groupsize).trigger('change'); // Trigger Change Event manually for any dependencies
            return false;
        }
        return true;
    });

【讨论】：

【解决方案3】：

我只使用手动解决方法解决了这个问题，我拦截了向上/向下键并使其跳过隐藏元素。适用于所有 3 种浏览器 (FF/IE/Chrome) 并在必要时环绕。令人惊讶的是需要 hack 并且在任何地方都没有其他信息可用。

$('#container').on('keydown', 'input', function(e) {

    var groupname = $(this).attr('name');
    var groupindex = $('[name="' + groupname +  '"]').index($(this));
    var groupsize = $('[name="' + groupname + '"]').length;     

    // For Down Arrow, if subsequent input in group is hidden, focus the one after it (wrap around if necessary)
    if (e.keyCode == 40 && 
        $('[name="' + groupname + '"]').eq(groupindex + 1).length && 
        $('[name="' + groupname + '"]').eq(groupindex + 1).is(':hidden')) 
    {
        e.preventDefault();
        $('[name="' + groupname + '"]').eq((groupindex + 2) % groupsize).focus();
        $('[name="' + groupname + '"]').eq((groupindex + 2) % groupsize).prop('checked', true);
        $('[name="' + groupname + '"]').trigger('change'); // Trigger Change Event manually for any dependencies
        return false;
    }
    // For Up Arrow, if preceding input in group is hidden, focus and select the one before it (wrap around if necessary)
    else if (e.keyCode == 38 && 
            $('[name="' + groupname + '"]').eq(groupindex - 1).length && 
            $('[name="' + groupname + '"]').eq(groupindex - 1).is(':hidden')) 
    {
        e.preventDefault();
        $('[name="' + groupname + '"]').eq((groupindex - 2) % groupsize).focus();
        $('[name="' + groupname + '"]').eq((groupindex - 2) % groupsize).prop('checked', true);
        $('[name="' + groupname + '"]').trigger('change'); // Trigger Change Event manually for any dependencies
        return false;
    }

    return true;
});

完整的演示片段

	$('#container').on('keydown', 'input', function(e) {
		
		var groupname = $(this).attr('name');
		var groupindex = $('[name="' + groupname +  '"]').index($(this));
		var groupsize = $('[name="' + groupname + '"]').length;		
		
		// For Down Arrow, if subsequent input in group is hidden, focus the one after it (wrap around if necessary)
		if (e.keyCode == 40 && 
			$('[name="' + groupname + '"]').eq(groupindex + 1).length && 
			$('[name="' + groupname + '"]').eq(groupindex + 1).is(':hidden')) 
		{
			e.preventDefault();
			$('[name="' + groupname + '"]').eq((groupindex + 2) % groupsize).focus();
			$('[name="' + groupname + '"]').eq((groupindex + 2) % groupsize).prop('checked', true);
			$('[name="' + groupname + '"]').trigger('change'); // Trigger Change Event manually for any dependencies
			return false;
		}
		// For Up Arrow, if preceding input in group is hidden, focus and select the one before it (wrap around if necessary)
		else if (e.keyCode == 38 && 
				$('[name="' + groupname + '"]').eq(groupindex - 1).length && 
				$('[name="' + groupname + '"]').eq(groupindex - 1).is(':hidden')) 
		{
			e.preventDefault();
			$('[name="' + groupname + '"]').eq((groupindex - 2) % groupsize).focus();
			$('[name="' + groupname + '"]').eq((groupindex - 2) % groupsize).prop('checked', true);
			$('[name="' + groupname + '"]').trigger('change'); // Trigger Change Event manually for any dependencies
			return false;
		}
		
		return true;
	});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>

<div id="container">

  <div>
      <input type="radio" id="opt1" value="1" name="group">
      <label for="opt1">Option 1</label>
  </div>
  <div>
      <input type="radio" id="opt2" value="2" name="group">
      <label for="opt2">Option 2</label>
  </div>  
  <div>
      <input type="radio" id="opt3" value="3" name="group">
      <label for="opt3">Option 3</label>
  </div>  
  <div style="display:none;">
      <input type="radio" id="optSecret" value="secret" name="group">
      <label for="optSecret">Option Secret</label>
  </div>  
  <div>
      <input type="radio" id="opt5" value="5" name="group">
      <label for="opt5">Option 5</label>
  </div>    

</div>

【讨论】：