Работа tabindex

Особенности работы атрибута tabindex

by Сергій Куліков

HTML

Нажмите где угодно на белом фоне, а потом кнопку клавиатуры Tab для перехода между элементами <br><br>

<button tabindex="1">Tabindex 1</button>
<div tabindex="0">Tabindex 0 (этот в самом конце, так и должно быть)</div>
<div tabindex="1">Tabindex 1</div>
<div tabindex="2">Tabindex 2</div>

А теперь кликните мышкой на "Tabindex 1" и снова нажимайте кнопку клавиатуры Tab.
Это демонстрирует, что переход по tabindex происходит от последнего места клика мышкой.

CSS

*:focus {
	outline: 1px solid red;
}

div {
	background-color: lime;
	margin: 10px;
}