[javascript] 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;
}답변
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>