如何在Firefox和IE中使用键盘导航跳过隐藏的单选选项? [英] How to skip a hidden radio option with keyboard navigation in Firefox and IE?

问题描述

更新 即使尝试了建议

UPDATE The following problem occurs even after trying out the suggestions here. The latest code snippet demonstrates all 3 approaches of hiding a Radio Button and breaking ↓ / ↑ (Up/Down arrow keys) keyboard navigation in the radio group in Firefox & IE.

假设我有一个单选组，每个单选按钮的标签都位于DIV中.一旦至少有一个焦点，我就使用箭头键(上/下)浏览我的单选按钮.

Suppose I have a Radio Group, each radio button with its label in a DIV. I use the arrow keys (up/down) to browse my radio buttons once at least one of them has focus.

我的广播"组中的一个单选按钮被隐藏了.它位于具有display:none;的DIV中(但我也尝试了visibility:hidden和position:fixed;opacity:0作为可能的选择).

One of the radio buttons in my Radio Group is hidden. It's in a DIV which has display:none; (but I also tried visibility:hidden and position:fixed;opacity:0 as possible alternatives).

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

I noticed that in Chrome, I can still use the up/down arrows to traverse the focused list without problems, but in Firefox and IE my navigation breaks when the focus is supposed to shift to the radiobutton over the hidden one.

要查看此内容，请在此代码段中执行以下操作:

To see this, do the following in this snippet:

1)在Firefox或IE vs. Chrome中，首先用鼠标选择单选按钮#1(在每一列中，查看每种方法)

1) In Firefox or IE vs. Chrome, first select Radio Button #1 with the mouse (in each column, to see each approach)

2)现在，使用↓ 键导航到列表的末尾:看到它在Firefox和IE中会中断，但在Chrome中可以使用.取消选中该组，您将失去对Firefox和IE的关注.

2) Now use the ↓ key to navigate to the end of the list: see that it breaks in Firefox and IE, but works in Chrome. The group is deselected and you lose focus in Firefox and IE.

3)您也可以从头开始以相反的顺序尝试它，它会以相同的方式破坏.

3) You can also try it from the end in reverse order, it'll break the same way.

<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>

状态:

1. display:none;中断了隐藏的单选按钮的循环，但折叠了空间；
2. visibility:hidden中断了隐藏的单选按钮的循环，但保留了空间；
3. position:fixed;opacity:0中断循环一次(临时陷阱)，但在按向上/向下箭头键继续操作后恢复.但是正常的骑行仍然无法完成.

1. display:none; breaks the cycle over the hidden Radio Button, but collapses the space;
2. visibility:hidden breaks the cycle over the hidden Radio Button, but preserves the space;
3. position:fixed;opacity:0 breaks the cycle once (temporary trap) but then resumes after pressing Arrow Up/Down to continue. But normal cycling is still broken.

推荐答案

我仅通过手动工作环境解决了该问题，在其中我拦截了Up/Down键并使其跳过了隐藏元素.在所有3种浏览器(FF/IE/Chrome)中均可使用，并在必要时进行环绕.令人惊讶的是需要黑客入侵，并且在任何地方都找不到其他信息.

I only solved it with a manual workround, where I intercept the Up/Down keys and make it jump over the hidden element. Works in all 3 browsers (FF/IE/Chrome) and wraps around if necessary. Surprising that a hack is required and no other info is available anywhere.

$('#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;
});

完整演示代码段

Full Demo Snippet

	$('#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>

这篇关于如何在Firefox和IE中使用键盘导航跳过隐藏的单选选项?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！