에 초점을 맞출 수 있을까요?에 초점을 맞출 수 있을까요?JavaScript focus() 함수를 사용하고 있습니까?

에 초점을 맞출 수 있을까요?

JavaScript focus() 함수를 사용하고 있습니까?

에 초점을 맞출 수 있을까요?<div>JavaScript 사용focus()기능하고 있습니까?

나는 가지고 있다<div>태그

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

나는 위에 초점을 맞추려고 노력하고 있다.<div>사용:

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

하지만 효과가 없어요.누가 제안 좀 해줄래?

네, 가능합니다.이를 수행하려면 탭 인덱스를 할당해야 합니다.

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

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

탭 인덱스를 -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>

스크립트에서는 초점을 맞출 수 있지만 다른 입력 방법에서는 초점을 맞출 수 없는 요소가 있는 것은 유감입니다(특히 사용자가 키보드만 사용하는 경우).디폴트로는 초점을 맞출 수 있고 사용자를 지원하기 위해 의미 정보가 포함되어 있는 표준 요소도 많이 있습니다.이 지식을 현명하게 활용하세요.

window.location.hash = '#tries';

그러면 해당 요소까지 스크롤하여 기본적으로 "포커스"에 초점을 맞춥니다.

document.getElementById('tries').scrollIntoView()이 방법이 더 효과적이야window.location.hash고정 위치에 있을 때 사용합니다.

tabindex를 사용할 수 있습니다.

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

tabindex 값은 몇 가지 흥미로운 동작을 허용합니다.

• "-1" 값이 지정되면 요소를 탭으로 표시할 수 없지만 요소를 사용하여 프로그래밍 방식으로 요소에 포커스를 제공할 수 있습니다.포커스()).
• 값이 0인 경우 요소는 키보드를 통해 포커스를 맞출 수 있으며 문서의 탭 흐름에 들어갑니다.0보다 큰 값은 1이 가장 중요한 priority 레벨을 만듭니다.

<div id="inner" tabindex="0">
    this div can now have focus and receive keyboard events
</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>

Michael Shimmin과 같은 것을 제안하고 싶었지만 요소나 적용되는 CSS와 같은 것을 하드코딩하지 않았습니다.

클래스 추가/제거에만 jQuery를 사용하고 있습니다.jQuery를 사용하지 않으려면 클래스 추가/제거만 대체하면 됩니다.

--Javascript

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초간 빨간색으로 점등된 후 다시 제거됩니다.

언급URL : https://stackoverflow.com/questions/3656467/is-it-possible-to-focus-on-a-div-using-javascript-focus-function