$ .focus ()가 작동하지 않습니다

jQuery focus()문서 의 마지막 예제 상태

$('#id').focus()

입력에 초점을 맞 춥니 다 (활성화). 이 작업을 수행 할 수없는 것 같습니다.

이 사이트의 콘솔에서도 검색 창을 사용하려고합니다.

$('input[name="q"]').focus()

나는 아무것도 얻지 못했습니다. 어떤 아이디어?

실제로이 사이트에 중점을 둔 예제는 콘솔에 중점을 두지 않는 한 제대로 작동합니다. 작동하지 않는 이유는 개발자 콘솔에서 포커스를 훔치지 않기 때문입니다. 콘솔에서 다음 코드를 실행 한 다음 브라우저 창에서 빠르게 클릭하면 검색 상자에 초점이 맞춰집니다.

setTimeout(function() { $('input[name="q"]').focus() }, 3000);

다른 하나는 과거에 문제를 일으킨 것은 사건의 순서입니다. DOM에 첨부되지 않은 요소에 대해서는 focus ()를 호출 할 수 없습니다. 집중하려는 요소가 이미 DOM에 첨부되어 있습니까?

인터넷의 다른 곳에서 해결책을 찾았습니다 ...

$('#id').focus();

작동하지 않았다.

$('#id').get(0).focus();

일했다.

여기서 답변 중 일부는 setTimeout대상 요소에 초점을 맞추는 프로세스를 지연시키는 데 사용 하는 것이 좋습니다 . 그들 중 하나는 대상이 모달 대화 상자 안에 있다고 언급합니다. setTimeout사용 된 곳의 특정 세부 사항을 모르면 솔루션 의 정확성에 대해 더 이상 언급 할 수 없습니다 . 그러나 나는 내가했던 것처럼이 스레드에 빠진 사람들을 돕기 위해 여기에 답변을 제공해야한다고 생각했습니다.

문제의 간단한 사실은 아직 보이지 않는 요소에 집중할 수 없다는 것입니다 . 이 문제점이 발생 하면 초점을 맞추려고 할 때 대상이 실제로 표시되는지 확인하십시오 . 내 경우에는이 라인을 따라 뭔가를하고있었습니다.

$('#elementid').animate({left:0,duration:'slow'});
$('#elementid').focus();

이것은 작동하지 않았다. 나는 단지 내가 $를 실행시에 무슨 일이 있었는지 깨달았다 ( '# elementId로부터'). 초점 ()`콘솔에서 했던 일을. 타겟 위의 코드에서 차이는 애니메이션이 완료 되지 않았기 때문에 타겟이 실제로 보일지 확실하지 않습니다 . 그리고 단서가있다

$('#elementid').animate({left:0,duration:'slow',complete:focusFunction});

function focusFunction(){$('#elementid').focus();}

예상대로 작동합니다. 나도 처음에는 setTimeout솔루션을 넣었고 너무 효과가있었습니다. 그러나, 임의로 선택된 타임 아웃은 호스트 장치가 대상 요소가 보이는지 확인하는 프로세스가 얼마나 느리게 진행되는지에 따라 솔루션을 조만간 중단 할 수밖에 없습니다.

부트 스트랩 + 모달을 사용하면 다음과 같이 작동합니다.

  $(myModal).modal('toggle');
  $(myModal).on('shown.bs.modal', function() {
    $('#modalSearchBox').focus()
  });

다른 사람 이이 질문을 우연히 발견하고 같은 상황을 겪을 경우를 대비하여 다른 요소를 클릭 한 후 초점을 설정하려고했지만 초점이 작동하지 않는 것 같습니다. 방금 필요한 것이 밝혀졌습니다. e.preventDefault();여기에 예가 있습니다.

$('#recipients ul li').mousedown(function(e) {
    // add recipient to list
    ...
    // focus back onto the input
    $('#message_recipient_input').focus();
    // prevent the focus from leaving
    e.preventDefault();
});

이것은 도움이되었다 :

mousedown 이벤트 핸들러에서 HTMLElement.focus ()를 호출하는 경우 HTMLElement를 벗어나지 않도록 포커스를 유지하려면 event.preventDefault ()를 호출해야합니다. 출처 : https://developer.mozilla.org/en/docs/Web/API/HTMLElement/focus

나는 이것이 오래되었다는 것을 알고 있지만 오늘 그것을 보았습니다. 대답 중 어느 것도 나를 위해 효과가 없었으며, 내가 찾은 것은 setTimeout이었습니다. setTimeout이 작동하여 모달의 입력에 초점을 맞추기를 원했습니다. 도움이 되었기를 바랍니다!

나는 또한이 문제가 있었다. 필자의 경우 효과적 인 해결책은 HTML 요소에서 tabindex 속성을 사용하는 것이 었습니다.

나는 사용하고 있었다 ng-repeat목록 내의 일부 li 요소를 하고 있었고 .focus ()를 사용하여 첫 번째 li에 초점을 맞출 수 없었으므로 루프 동안 각 li에 tabindex 속성을 추가했습니다.

그래서 지금 <li ng-repeat="user in users track by $index" tabindex="{{$index+1}}"></li>

+1은 0부터 시작하는 인덱스입니다. 또한 .focus () 함수를 호출하기 전에 요소가 DOM에 있는지 확인하십시오.

이게 도움이 되길 바란다.

"$ (element) .show ()"를 사용했기 때문에 작동하지 않는 문제가있는 경우 다음 방법으로 해결했습니다.

 var textbox = $("#otherOption");
 textbox.show("fast", function () {
    textbox[0].focus();
  });

따라서 타이머가 필요하지 않으며 show 메소드가 완료된 후에 실행됩니다.

focus () 전에 지연을 추가하십시오. 200ms면 충분

function focusAndCursor(selector){
  var input = $(selector);
  setTimeout(function() {
    // this focus on last character if input isn't empty
    tmp = input.val(); input.focus().val("").blur().focus().val(tmp);
  }, 200);
}

이 문제가 지금 막 다시 발생했고, 믿거 나 말거나, 개발자 도구를 닫기 만하면됩니다. 분명히 콘솔 탭은 페이지 내용보다 우선 순위가 높습니다.

요소와 그 부모가 보이는지 확인하십시오. 숨겨진 요소에는 초점을 맞출 수 없습니다

추가 솔루션 focus ()가 작동하지 않는 것처럼 보였지만 결국에는 필요한 것이 올바른 위치로 스크롤되는 것으로 나타났습니다.

• https://stackoverflow.com/a/43342974/1335717

필자의 경우 탭 인덱스를 지정해야했습니다 ( -1스크립트를 통해서만 초점을 맞출 수있는 경우)

<div tabindex='-1'>
<!-- ... -->
</div>