javascript 在隐藏元素上强制制表位？可能的？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3537596/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Forcing a tab stop on a hidden element? Possible?
提问by ParoX
I have opt to using the radiobutton's labels as customized buttons for them. This means the radio inputs themselves are display:none. Because of this, the browsers don't tab stop at the radio labels, but I want them to.
我选择使用单选按钮的标签作为它们的自定义按钮。这意味着无线电输入本身是 display:none。因此，浏览器不会在无线电标签处停止制表符，但我希望他们这样做。
I tried forcing a tabindex to them, but no cigar.
我试着给他们强制使用 tabindex，但没有雪茄。
I have came up with just putting a pointless checkbox right before the labels, and set it to width: 1px; and height 1px; which seems to only really work on chrome & safari.
我想出了在标签之前放置一个毫无意义的复选框，并将其设置为 width: 1px; 和高度 1px; 这似乎只适用于 chrome 和 safari。
So do you have any other ideas for forcing a tab stop at those locations without showing an element?
那么您是否有任何其他想法可以在不显示元素的情况下强制在这些位置停止制表符？
Edit:
编辑：
Just incase someone else comes by this, this is how I was able to insert small checkboxes into chrome & safari using JQuery:
以防万一其他人来了，这就是我能够使用 JQuery 将小复选框插入 chrome 和 safari 的方法：
if ($.browser.safari) {
$("label[for='Unlimited']").parent().after('<input style="height:1px; width:1px;" type="checkbox">');
$("label[for='cash']").parent().after('<input style="height:1px; width:1px;" type="checkbox">');
$("label[for='Length12']").parent().after('<input style="height:1px; width:1px;" type="checkbox">');
}
Note: $.browser.webkit was not becoming true...so I had to use safari
注意：$.browser.webkit 没有变成真的...所以我不得不使用 safari
采纳答案by strager
Keep the radio input hidden, but set tabindex="0"on the <label>element of reach radio input.
保持无线电输入隐藏，但设置tabindex="0"在<label>到达无线电输入的元素上。
(A tab index of 0 keeps the element in tab flow with other elements with an unspecified tab index which are still tabbable.)
（标签索引为 0 使元素保持在标签流中，而其他具有未指定标签索引的元素仍然是可标签的。）
回答by Felix Geenen
a working solution in my case to enable tab selection / arrow navigation was to set the opacity to zero rather than a "display: none"
在我的情况下，启用选项卡选择/箭头导航的可行解决方案是将不透明度设置为零而不是“显示：无”
.styled-selection input {
opacity: 0; // hide it visually
z-index: -1; // avoid unintended clicks
position: absolute; // don't affect other elements positioning
}
回答by kennebec
If you separate the label from any field and set a tabIndex you can tab to it and capture mouse and key events. It seems more sensible to use buttons or inputs with type="button", but suit yourself.
如果您将标签与任何字段分开并设置 tabIndex，您可以使用 Tab 对其进行标记并捕获鼠标和键事件。使用带有 type="button" 的按钮或输入似乎更明智，但适合自己。
<form>
<fieldset>
<input value="today">
<label tabIndex="0" onfocus="alert('label');">Label 1</label>
</fieldset>
</form>
回答by RoboBear
I have an alternative answer that I think has not been mentioned yet. For recent work I've been reading the Mozilla Developer Docs MDN Docs, Forms, especially the Accessibility Section MDN Docs, Accessible HTML(5), for information related to keyboard accessibility and form structure.
我有一个我认为尚未提及的替代答案。对于最近的工作，我一直在阅读 Mozilla Developer Docs MDN Docs, Forms，尤其是 Accessibility Section MDN Docs, Accessible HTML(5)，以获取与键盘可访问性和表单结构相关的信息。
One of the specific mentions in the Accessibility section is to use HTML5 elements when and where possible -- they often have cross-browser and more accessible support by default (not always true, but clear content structure and proper elements also help screen reading along with keyboard accessibility).
可访问性部分中的一个具体提及是在可能的情况下使用 HTML5 元素——默认情况下，它们通常具有跨浏览器和更易于访问的支持（并非总是如此，但清晰的内容结构和适当的元素也有助于屏幕阅读键盘可访问性）。
Anyway, here's a JSFiddle: JSFiddle::Keyboard Accessible Forms
无论如何，这里有一个 JSFiddle：JSFiddle::Keyboard Accessible Forms
Essentially, what I did was:
基本上，我所做的是：
- shamelessly copy over some of the source code from a Mozilla source code to a JSFiddle(source in the comments of the fiddle)
- create a TEXT-type and assign it the "readonly" HTML5 attribute
- add attribute tabindex="0"to the readonly
- Modify the "readonly" CSSfor that input element so it looks "blank" or hidden"
- 无耻地将一些源代码从Mozilla 源代码复制到 JSFiddle（小提琴注释中的源代码）
- 创建一个 TEXT 类型并为其分配“只读”HTML5 属性
- 将属性tabindex="0"添加到只读
- 修改该输入元素的“只读”CSS，使其看起来“空白”或“隐藏”
HTML
HTML
<title>Native keyboard accessibility</title>
<body>
<h1>Native keyboard accessibility</h1>
<hr>
<h2>Links</h2>
<p>This is a link to <a href="https://www.mozilla.org">Mozilla</a>.</p>
<p>Another link, to the <a href="https://developer.mozilla.org">Mozilla Developer Network</a>.</p>
<h2>Buttons</h2>
<p>
<button data-message="This is from the first button">Click me!</button>
<button data-message="This is from the second button">Click me too!
</button>
<button data-message="This is from the third button">And me!</button>
</p>
<!-- "Invisible" HTML(5) element -->
<!-- * a READONLY text-input with modified CSS... -->
<hr>
<label for="hidden-anchor">Hidden Anchor Point</label>
<input type="text" class="hidden-anchor" id="hidden-anchor" tabindex="0" readonly />
<hr>
<h2>Form</h2>
<form name="personal-info">
<fieldset>
<legend>Personal Info</legend>
<div>
<label for="name">Fill in your name:</label>
<input type="text" id="name" name="name">
</div>
<div>
<label for="age">Enter your age:</label>
<input type="text" id="age" name="age">
</div>
<div>
<label for="mood">Choose your mood:</label>
<select id="mood" name="mood">
<option>Happy</option>
<option>Sad</option>
<option>Angry</option>
<option>Worried</option>
</select>
</div>
</fieldset>
</form>
<script>
var buttons = document.querySelectorAll('button');
for(var i = 0; i < buttons.length; i++) {
addHandler(buttons[i]);
}
function addHandler(button) {
button.addEventListener('click', function(e) {
var message = e.target.getAttribute('data-message');
alert(message);
})
}
</script>
</body>
CSS Styling
CSS 样式
input {
margin-bottom: 10px;
}
button {
margin-right: 10px;
}
a:hover, input:hover, button:hover, select:hover,
a:focus, input:focus, button:focus, select:focus {
font-weight: bold;
}
.hidden-anchor {
border: none;
background: transparent!important;
}
.hidden-anchor:focus {
border: 1px solid #f6b73c;
}
BTW, you can edit the CSS rule for .hidden-anchor:focusto remove the highlight for the hidden anchor if you want. I added it just to "prove" the concept here, but it still works invisibly as requested.
顺便说一句，如果需要，您可以编辑.hidden-anchor:focus的 CSS 规则以删除隐藏锚点的突出显示。我添加它只是为了“证明”这里的概念，但它仍然按要求隐形工作。
I hope this helps!
我希望这有帮助！
回答by Drazen Bjelovuk
My preference:
我的偏好：
.tab-only:not(:focus) {
position: fixed;
left: -999999px;
}
<button class="tab-only">Jump to main</button>
回答by Aides
Another great option would be to nest your input + divin a labeland hide the input by setting width and height to 0pxinstead of display: none
另一个不错的选择是将输入 + div嵌套在标签中，并通过将宽度和高度设置为 0px而不是display: none来隐藏输入
This method even allows you to use pseudo-classes like :focus or :checked by using input:pseudo + styleDiv
这个方法甚至允许你使用伪类，比如 :focus 或 :checked by using input:pseudo + styleDiv
<label>
<input type="radio">
<div class="styleDiv">Display text</div>
</label>
input
{
width: 0px;
height: 0px;
}
input + .styleDiv
{
//Radiobutton style here
display: inline-block
}
input:checked + .styleDiv
{
//Checked style here
}
回答by cllpse
Discard the radio-buttons and instead; keep some hidden fields in your code, in which you store the selected value of your UI components.
丢弃单选按钮，取而代之；在您的代码中保留一些隐藏字段，您可以在其中存储 UI 组件的选定值。
