업데이트:

실무에서나 블로그 작업에서나 Tab키에 의한 초점이동 테스트를 할 때, “현재 초점이 잡힌 요소에 숫자가 떠서 몇 번째 요소에 초점이 잡혔는지 알 수 있으면 좋겠다”라는 생각을 했는데, 코드를 만들어서 테스트해본 결과 대만족. 실무에서도 사용할 계획임.

기존에 만들었던 코드

1
2
3

$("*").on("focus", function() {
  console.log(document.activeElement);
});

현재 초점이 잡힌 요소를 console에 띄우는 것밖에 없다.

새로 만든 코드

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

var objActiveCount = 0
  , objTabbable = $("button, input:not([type='hidden']), select, textarea, [href], [tabindex]:not([tabindex='-1'])");

objTabbable.focus(function() {
  objActiveCount += 1;

  var objActivated = document.activeElement
    , objActiveNum = document.createElement("span");

  objActiveNum.classList.add("active-n");
  objActiveNum.innerHTML = objActiveCount;

  $(this).find(objActiveNum).length || $(this).append(objActiveNum);
  console.log(objActivated, objActiveCount);
});

See the Pen xxwjKvx by sel (@selucky) on CodePen.

200510, 코드를 개선해보았음.

1

objActiveNum.style.cssText = "position: absolute; z-index: 99999; font-size: 5rem; font-weight: 700; color: #525252";

숫자(span 요소)에 미리 정의해둔 클래스(active-n)를 붙이지 않고 js에서 style을 주는 방식으로 바꾸어보았다. 개인적으로 더 나은 듯.

Hero image from Alltechbuzz