使 HTML 元素不可聚焦
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9152096/
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
Make an HTML element non-focusable
提问by Alvis
Is it possible to make an HTML element non-focusable?
是否可以使 HTML 元素不可聚焦？
I understand that a list of elements that can receive focuscan be defined and that a user can navigate through these elements by pressing a Tabkey. I also see that it is up to the browser to control this.
我知道可以定义可以接收焦点的元素列表，并且用户可以通过按一个Tab键来浏览这些元素。我还看到由浏览器来控制它。
But maybe there is a way to make certain elements non-focusable, say I want a user to skip a certain <a>tag when pressing a Tab.
但是也许有一种方法可以使某些元素不可聚焦，比如说我希望用户<a>在按下Tab.
回答by Fedor Skrynnikov
<a href="http://foo.bar" tabIndex="-1">unfocusable</a>
A negative value means that the element should be focusable, but should not be reachable via sequential keyboard navigation.
负值意味着该元素应该是可聚焦的，但不应通过顺序键盘导航访问。
https://developer.mozilla.org/nl/docs/Web/HTML/Global_attributes/tabindex
https://developer.mozilla.org/nl/docs/Web/HTML/Global_attributes/tabindex
回答by Randy
To completely prevent focus, not just when using the tabbutton, set disabledas an attribute in your HTML element.
要完全阻止焦点，而不仅仅是在使用tab按钮时，请将其设置disabled为 HTML 元素中的属性。
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<input class="form-control" type="text"> Click this, you can see it's focusable.
<input class="form-control" type="text" readonly> Click this, you can see it's focusable.
<input class="form-control" type="text" readonly tabindex="-1"> Click this, you can see it's focusable. Not tab'able.
<input class="form-control" type="text" disabled> Click this, you can see it's <strong>not</strong> focusable.回答by ShortFuse
In order to make an prevent an element from taking focus ("non-focusable"), you need to use Javascript to watch for the focusand prevent the default interaction.
为了防止元素获得焦点（“不可聚焦”），您需要使用 Javascript 来监视focus并阻止默认交互。
In order to prevent an element from being tabbed to, use tabindex=-1attribute.
为了防止元素被制表符，请使用tabindex=-1属性。
Adding tabindex=-1will make any element focusable, even divelements. This means when a user clicks on it, it would likely get a focus outline, depending on the browser..
添加tabindex=-1将使任何元素成为焦点，甚至div元素。这意味着当用户单击它时，它可能会获得焦点轮廓，具体取决于浏览器。
You would ideally, want this:
理想情况下，您希望这样：
function preventFocus(event) {
event.preventDefault();
if (event.relatedTarget) {
// Revert focus back to previous blurring element
event.relatedTarget.focus();
} else {
// No previous focus target, blur instead
event.currentTarget.blur();
}
}
/* ... */
element.setAttribute('tabindex', '-1');
element.addEventListener('focus', preventFocus);
回答by Zohid
I used focusable="false", because tabindex="-1"was not working in IE.
我用过focusable="false"，因为tabindex="-1"不能在 IE 中工作。
回答by rie819
TabIndex is what your looking for: http://www.w3schools.com/jsref/prop_html_tabindex.asp.
TabIndex 是您要查找的内容：http: //www.w3schools.com/jsref/prop_html_tabindex.asp。
When you set a tabIndex value to -1 you will skip it when tabbing through your form.
当您将 tabIndex 值设置为 -1 时，您将在通过 Tab 键浏览表单时跳过它。
回答by r3st0r3
For the element you do not want to be focused on tab, you have to put the tabindex as a negative value.
对于不想关注 tab 的元素，必须将 tabindex 设为负值。
回答by Alexander Abakumov
Making a focusable-by-default HTML element a non-focusable one isn't possible without JavaScript.
如果没有 JavaScript，就不可能将默认可聚焦的 HTML 元素变成不可聚焦的元素。
After diving into focus-related DOM events, I've came up with the following implementation (based on the @ShortFuse's answer, but fixed some issues and edge cases):
在深入研究与焦点相关的 DOM 事件后，我提出了以下实现（基于@ShortFuse 的回答，但修复了一些问题和边缘情况）：
// A focus event handler to prevent focusing an element it attached to
onFocus(event: FocusEvent): void {
event.preventDefault();
// Try to remove the focus from this element.
// This is important to always perform, since just focusing the previously focused element won't work in Edge/FF, if that element is unable to actually get the focus back (became invisible, etc.): the focus would stay on the current element in such a case
const currentTarget: any | null = event.currentTarget;
if (currentTarget !== null && isFunction(currentTarget.blur))
currentTarget.blur();
// Try to set focus back to the previous element
const relatedTarget: any | null = event.relatedTarget;
if (relatedTarget !== null && isFunction(relatedTarget.focus))
relatedTarget.focus();
}
// Not the best implementation, but works for the majority of the real-world cases
export function isFunction(value: any): value is Function {
return value instanceof Function;
}
This is implemented in TypeScript, but could be easily adjusted for plain JavaScript.
这是在 TypeScript 中实现的，但可以很容易地针对普通 JavaScript 进行调整。
回答by Spencer Haley
I was just reading YouTube source code, I see focusable="false"
我只是在阅读 YouTube 源代码，我看到了 focusable="false"
<svg xmlns="https://www.w3.org/2000/svg" focusable="false" aria-label="" fill="#4285F4" viewBox="0 0 24 24" height="24" width="24" style="margin-left: 4px; margin-top: 4px;"><path d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"></path></svg>
<svg xmlns="https://www.w3.org/2000/svg" focusable="false" aria-label="" fill="#4285F4" viewBox="0 0 24 24" height="24" width="24" style="margin-left: 4px; margin-top: 4px;"><path d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"></path></svg>
Is that a more correct answer?
这是一个更正确的答案吗？
