JavaScript focus () 함수를 사용하여 <div>에 집중할 수 있습니까?

<div>JavaScript focus()기능 사용 에 집중할 수 있습니까?

나는이 <div>태그를

<div id="tries">You have 3 tries left</div>

나는 <div>다음을 사용 하여 위의 내용에 집중하려고합니다 .

document.getElementById('tries').focus();

그러나 작동하지 않습니다. 누군가가 뭔가를 제안 할 수 있습니까 ....?

window.location.hash = '#tries';

이것은 해당 요소로 스크롤하여 본질적으로 "초점"을 맞 춥니 다.

예-가능합니다. 그렇게하려면 tabindex를 할당해야합니다 ...

<div tabindex="0">Hello World</div>

tabindex가 0이면 "페이지의 자연 탭 순서로"태그가 배치됩니다. 숫자가 높을수록 특정 우선 순위가 부여됩니다. 여기서 1은 첫 번째, 2 초 등이됩니다.

tabindex에 -1을 부여하면 div는 사용자가 아닌 스크립트로만 초점을 맞출 수 있습니다.

document.getElementById('test').onclick = function () {
    document.getElementById('scripted').focus();
};

div:focus {
    background-color: Aqua;
}

<div>Element X (not focusable)</div>
<div tabindex="0">Element Y (user or script focusable)</div>
<div tabindex="-1" id="scripted">Element Z (script-only focusable)</div>
<div id="test">Set Focus To Element Z</div>

분명히, 다른 입력 방법으로는 초점을 맞출 수없는 스크립트로 초점을 맞출 수있는 요소를 갖는 것은 부끄러운 일입니다 (특히 사용자가 키보드 만 있거나 유사하게 제한되어있는 경우). 기본적으로 초점을 맞출 수 있고 의미있는 정보가 구워 져 사용자를 지원 하는 표준 요소가 많이 있습니다. 이 지식을 현명하게 사용하십시오.

document.getElementById('tries').scrollIntoView()공장. window.location.hash 위치를 고정했을 때보 다 더 효과적 입니다.

tabindex를 사용할 수 있습니다

<div tabindex="-1"  id="tries"></div>

tabindex 값을 사용하면 재미있는 동작을 수행 할 수 있습니다.

• "-1"의 값을 지정하면 요소를 탭할 수 없지만 프로그래밍 방식으로 요소에 포커스를 줄 수 있습니다 (element.focus () 사용).
• 값이 0 인 경우 키보드를 통해 요소에 초점을 맞추고 문서의 탭 흐름에 해당합니다. 0보다 큰 값은 1이 가장 중요한 우선 순위 레벨을 작성합니다.

<div id="inner" tabindex="0">
    this div can now have focus and receive keyboard events
</div>

Michael Shimmin과 같은 것을 제안하고 싶지만 요소 또는 CSS에 적용된 CSS와 같은 하드 코딩은 없습니다.

jQuery를 추가 / 제거 클래스로만 사용하고 있습니다 .jquery를 사용하지 않으려면 add / removeClass를 대체해야합니다.

-자바 스크립트

function highlight(el, durationMs) { 
  el = $(el);
  el.addClass('highlighted');
  setTimeout(function() {
    el.removeClass('highlighted')
  }, durationMs || 1000);
}

highlight(document.getElementById('tries'));

--CSS

#tries {
    border: 1px solid gray;
}

#tries.highlighted {
    border: 3px solid red;
}

테두리를 플래시하려면 다음을 수행하십시오.

function focusTries() {
    document.getElementById('tries').style.border = 'solid 1px #ff0000;'
    setTimeout ( clearBorder(), 1000 );
}

function clearBorder() {
    document.getElementById('tries').style.border = '';
}

테두리가 1 초 동안 빨간색으로 바뀌고 다시 제거됩니다.