是否可以使 HTML 元素不可聚焦？
我了解可以定义a list of elements that can receive focus，并且用户可以通过按Tab 键来浏览这些元素。我还看到由浏览器来控制它。
但也许有一种方法可以使某些元素无法聚焦，比如我希望用户在按下 Tab 时跳过某个<a> 标签。
【问题讨论】：
如果您正在寻找全局解决方案：
<a href="#" class="__nofocus" tabindex="-1">Link</a>
document.body.addEventListener('focusin', (e) => {
if (e.target.classList.contains('__nofocus')) {
e.relatedTarget ? e.relatedTarget.focus() : e.target.blur();
}
});
它应该适用于锚点、按钮和其他任何可以默认获得焦点的东西。不要忘记设置tabindex="-1"，否则该元素将无法通过 Tab 键导航。
【讨论】：
如果没有 JavaScript，就无法将默认可聚焦的 HTML 元素设为不可聚焦的元素。
在深入研究与焦点相关的 DOM 事件后，我提出了以下实现（基于 @ShortFuse 的 answer，但修复了一些问题和边缘情况）：
// 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;
}
这是在 TypeScript 中实现的，但可以很容易地调整为纯 JavaScript。
【讨论】：
<a href="http://foo.bar" tabindex="-1">unfocusable</a>
负值表示该元素应该是可聚焦的，但不应通过顺序键盘导航访问。
【讨论】：
tabindex 的值是无效的 HTML（尽管我认为它在 HTML5 中有效）。
disabled 属性，正如@Randy 的回答中提到的那样。
我使用了focusable="false"，因为tabindex="-1" 在 IE 中不起作用。
【讨论】：
为了防止元素获得焦点（“不可聚焦”），您需要使用 Javascript 来监视 focus 并防止默认交互。
为了防止一个元素被标签，使用tabindex=-1属性。
添加tabindex=-1 将使任何元素都成为焦点，即使是div 元素。这意味着当用户点击它时，它可能会得到一个焦点轮廓，具体取决于浏览器..
理想情况下，你会想要这个：
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);
【讨论】：
要完全阻止焦点，而不仅仅是在使用 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.【讨论】：
input 元素——如果我不希望<div> 能够获得焦点，disabled 无济于事。
对于不想关注tab的元素，必须将tabindex设为负值。
【讨论】：
TabIndex 是您要查找的内容：http://www.w3schools.com/jsref/prop_html_tabindex.asp。
当您将 tabIndex 值设置为 -1 时，您将在表单中跳转时跳过它。
【讨论】：