source

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

factcode 2023. 9. 6. 22:24
반응형

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

jQuery의 문서 상태의 마지막 예.

$('#id').focus()

입력을 포커스(활성화)해야 합니다.이 일이 잘 안 되는 것 같습니다.

이 사이트의 콘솔에서도 검색창을 사용해 보고 있습니다.

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

아무것도 못 얻고 있습니다무슨 생각 있어요?

실제로 콘솔에서 초점을 맞추지 않는 한 이 사이트에 초점을 맞추기 위해 제공한 예는 잘 작동합니다.작동하지 않는 이유는 단순히 개발 콘솔에서 포커스를 뺏지 않기 때문입니다.콘솔에서 다음 코드를 실행한 후 브라우저 창을 빠르게 클릭하면 검색 상자에 포커스가 맞춰지는 것을 볼 수 있습니다.

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

당신의 다른 하나에 관해서는, 과거에 저를 곤란하게 한 것은 사건의 질서입니다.DOM에 연결되지 않은 요소에 포커스()를 호출할 수 없습니다.초점을 맞추려는 요소가 DOM에 이미 첨부되었습니까?

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

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

작동하지 않았습니다.

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

일을 했습니다.

여기에 제시된 답변 중 일부는 다음을 사용할 것을 제안합니다.setTimeout대상 요소에 초점을 맞추는 과정을 지연시킵니다.그 중 하나는 대상이 모달 대화 상자 안에 있다고 언급합니다.나는 더이상 그것의 정확성에 대해 언급할 수 없습니다.setTimeout사용된 장소에 대한 구체적인 세부 사항을 알지 못한 채 해결할 수 있습니다.

문제의 단순한 사실은 아직 보이지 않는 요소에 초점을 맞출 수 없다는 것입니다.문제가 발생하면 초점을 맞추려고 할 때 대상이 실제로 보이는지 확인합니다.제 경우에는 이 선을 따라 무언가를 하고 있었습니다.

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

이것은 효과가 없었습니다.$('#elementid')를 실행했을 때 비로소 상황을 깨달았습니다.작동한 콘솔에서 포커스(focus)'.다른 점은 - 목표 위의 내 코드에서는 애니메이션이 완성되지 않았을 수도 있기 때문에 목표가 실제로 보일 것이라는 확신이 없습니다.그리고 거기에 단서가 있습니다.

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

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

예상대로 효과가 있습니다.저도 처음에 A를 넣었습니다.setTimeout해결책도 있고 효과도 있었습니다.그러나 임의로 선택된 타임아웃은 호스트 디바이스가 대상 요소를 볼 수 있도록 보장하는 프로세스를 얼마나 느리게 진행하느냐에 따라 조만간 해결책이 중단될 수밖에 없습니다.

부트스트랩 + 모달을 사용한다면, 이것은 나에게 효과가 있었습니다:

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

혹시 다른 사람이 이 질문을 우연히 발견했을 때 저와 같은 상황에 처했을 경우를 대비하여 다른 요소를 클릭한 후 초점을 맞추려고 했는데 초점이 작동하지 않는 것 같습니다.알고 보니 난 그저 그가 필요했던e.preventDefault(); -는과다다과e는:e-'ns.

$('#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();
});

이를 통해 다음과 같은 이점을 얻을 수 있습니다.

HMELElement를 부르면.마우스 다운 이벤트 핸들러에서 focus()를 호출하여 포커스가 HTML 요소를 벗어나지 않도록 해야 합니다.출처 : https://developer.mozilla.org/en/docs/Web/API/HTMLElement/focus

저도 이런 문제가 있었습니다.제 경우에 효과가 있었던 해결책은 HTML 요소의 tabindex 속성을 사용하는 것이었습니다.

사용하고 있었습니다.ng-repeat목록 내의 일부 lie 요소에 대해 .focus()를 사용하여 첫 번째 li에 포커스를 가져올 수 없었기 때문에 루프 중에 각 li에 tabindex 속성을 추가했습니다.

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

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

도움이 되었으면 좋겠습니다.

저는 이것이 오래된 것임을 깨달았지만, 오늘 우연히 발견했습니다.어떤 대답도 저에게 효과가 없었습니다. 효과가 있다는 것을 발견한 것은 제한 시간이었습니다.setTimeout worked를 사용하여 modal의 입력 파일에 초점을 맞추기를 원했습니다.도움이 되길 바랍니다!

포커스() 전에 지연을 추가합니다. 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);
}

방금 이 문제가 다시 발생했는데 믿거나 말거나 개발자 도구를 닫기만 하면 되었습니다.콘솔 탭은 페이지 내용보다 포커스 우선 순위를 가집니다.

"$(element)"를 사용하여 작업이 되지 않는 문제가 있는 분들.쇼(show)."다음 방법으로 해결했습니다.

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

그래서 타이머는 필요 없고, 쇼 방식이 완료된 후에 실행됩니다.

요소와 해당 요소의 부모가 보이는지 확인합니다.숨겨진 요소에 포커스를 사용할 수 없습니다.

저의 경우, 그리고 다른 사람이 이런 일을 당했을 경우를 대비하여 보기 위해 양식을 로드하고, 사용자가 "편집"을 클릭하면 ajax는 값을 얻고 반환하여 양식을 업데이트합니다.

이 일이 있은 직후에 저는 이 모든 것을 시도해 보았지만 다음을 제외하고는 아무 것도 효과가 없었습니다.

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

(아약스로 인해) 변경해야 했던 것:

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

그리고 결국 $("#q")를 입력했음에도 불구하고 사용했습니다.

setTimeout(function () { $("#q").focus() }, 500);

Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ,setTimout기능이 완벽하게 작동했습니다.그러나 어찌된 일인지 이 문제를 해결하기 위한 최선의 방법이 아닌 것처럼 느껴졌습니다(수동으로 사건을 지연시키는 것).

하지만 제 경우에는 요소가 보이지 않거나 숨겨져서 포커스 이벤트가 트리거되지 않았고 몇 밀리초 후에 포커스 이벤트가 트리거된 것으로 나타났습니다.element.on("focus")function (요소가 클릭되고 요소가 에 포커스가 맞춰질 때 트리거됩니다).

효과가 있었습니다.

element.on("focus", (e) => {
  e.preventDefault();
  if (element.is(":visible")) {
    search_input.trigger("focus");
  }
});

프로 팁.개발 콘솔에서 포커스를 켜려면 옵션 탭에서 별도의 창으로 콘솔을 열기만 하면 됩니다.최신 파이어폭스와 크롬은 이 기능을 지원합니다.

크롬의 DevTool Console에서 코드 테스트를 했는데 포커스 부분이 작동하지 않았습니다.나중에 알게 된 문제는 DevTool에서 실행하고 웹사이트에 코드를 구현하면 문제가 없다는 것을 알게 되었습니다.사실은 소자가 초점이 맞춰졌지만 DevTool은 바로 소자를 제거했습니다.

이거 드셔보세요.idtries

window.location.hash = '#tries';

포커스를 맞추기 전에 tabindex=0으로 설정하는 것이 도움이 되었습니다.

const $elOk = $modal.querySelector('.modal__button-ok');
$elOk.setAttribute('tabindex', '0');
$elOk.focus();

사용..keypress()제게 문제가 되었던 거죠

사용해보기.keyup()아니면.input()만일 당신이 그러시다면.

.keydown()이상한 행동을 합니다.입력을 새 포커스 필드로 이동합니다.

이것이 좀 오래돼서 현재 솔루션을 추가했습니다.포커스 탭을 다음 입력으로 이동해야 하는 경우 $("#elid").nextAll("input")[0]을 사용합니다.초점을 맞추다때로는 타임아웃 기능을 사용하여 지연시킬 필요가 있지만, 200ms이면 충분합니다.

$(문서).on("키업", "#광고입력", 함수(e) {

       let el = $(e.target).closest("input")
       if (e.which == 13) {
      $(el).nextAll("input")[0].focus()
          
       }
   })

jquery가 작동하지 않을 경우 바닐라 js와 함께 쉽게 작동할 수 있습니다.

setTimeout(function() { document.querySelector("#id").focus() }, 500);

제 경우에는 탭 인덱스를 지정해야 했습니다 (-1스크립트를 통해서만 포커스를 맞출 수 있는 경우)

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

추가 솔루션 포커스()가 작동하지 않는 것처럼 보이는 동일한 문제가 있었지만 결국 필요한 것은 올바른 위치로 스크롤하는 것이었습니다.

언급URL : https://stackoverflow.com/questions/15859113/focus-not-working

반응형