Onclick 이벤트에서 JavaScript 초점 변경?

StackOverflow https://stackoverflow.com/questions/896521

문제

참고 : 가능한 솔루션은 Firefox 3.0에서만 작동하면됩니다. 내 앱은 IE의 액세스를 허용하지 않습니다! =))

클릭하면 사용자에게 LightBox를 표시하는 링크가 있습니다.

<a href="#" onclick="show_lightbox();return false;">show lightbox</a>

내 문제는 Lightbox가 표시되면 링크에 중점을두고 있다는 것입니다. 따라서 사용자가 위 또는 아래 키를 누르면 표시된 Lightbox가 아닌 기본 문서를 스크롤합니다!

이와 같은 코드를 사용하여 Lightbox 요소로 초점을 설정하려고했습니다.

function focus_on_lightbox() {
  document.getElementById('lightbox_content').focus(); 
}

Firebug 콘솔에 입력하면 제대로 작동하지만 OnClick 스 니펫 끝에 포함시킬 경우 작동하지 않습니다. OnClick 이벤트 내부에서 실행 된 코드에서 초점을 멀리 변경할 수없는 것처럼 보입니까?

- 업데이트 1 전에 이와 같은 것을 시도했습니다

<a href="#" onclick="show_lightbox();focus_on_lightbox();return false;">show lightbox</a>

그리고 다음과 같이 디버깅 출력을 추가하도록 기능을 수정했습니다.

function focus_on_lightbox() {
  console.log('hihi');
  console.log(document.activeElement);
  document.getElementById('lightbox_content').focus(); 
  console.log(document.activeElement);
}

출력은 다음과 같습니다

hihi
<a onclick="closePopup();lightbox('apartment_detail','11619');focus_on_lightbox();return false;" href="#">
<a onclick="closePopup();lightbox('apartment_detail','11619');focus_on_lightbox();return false;" href="#">

그래서 내가 무언가를하기 전에 초점은 링크에 있었고 초점을 바꾸려고 시도한 후에도 여전히 링크에 남아 있었습니까?

그것이 중요한지 확실하지 않지만 다음과 같이 Ajax를 사용하여 Lightbox를로드합니다.

  new Ajax.Updater(lightbox_content_id, url, {asynchronous:true, evalScripts:true, onLoading:show_lightbox_loading(), onComplete:focus_on_lightbox() });

Ajax가 완료된 후 초점을 설정하려고했지만 운이 없습니다.

내가 무엇을 놓치고 있습니까?

나는 초점을 설정하려고 노력함으로써 아래에 제안 된 솔루션을 만들려고 노력했으며, 문서를 확인하여 성공했는지 확인하십시오. 다음 기능을 사용하면 작동합니다.

function focus_on_lightbox() {
  var seconds_waited = 0
  pause(100);
  var current_focus = document.activeElement
  while (document.getElementById(lightbox_content_id) != current_focus && seconds_waited < 2000)
  {
    document.getElementById(lightbox_content_id).focus(); 
    console.log(document.activeElement);
    pause(100);
    current_focus = document.activeElement
    seconds_waited += 100;
  }
}

그러나 Firebug Debugging Statment Console.log를 제거하면 기능이 작동하지 않습니다 !! 왜 이것이 사실이 될지 모르겠어요? 왜 파이어 버그 콘솔에 변수를 출력하는 것이 날씨 초점에 영향을 미치는가? Console.log 명령문이 초점에 영향을 미칩니 까? 아마도 콘솔 디버깅 창에 초점을 맞추는 것일까 요?

도움이 되었습니까?

해결책 2

다음은 마침내 작동 한 기능입니다

function focus_on_lightbox(seconds) {
  var seconds_waited
  seconds_waited = seconds
  document.getElementById(lightbox_content_id).focus(); 
  seconds_waited += 100;

  if (document.getElementById(lightbox_content_id) != document.activeElement && seconds_waited < 2000)
    setTimeout("focus_on_lightbox(" + seconds_waited + ");", 100);
  {
  }
}

그렇다면 왜 Console.log가 초점 설정에 영향을 미쳤습니까? 이 기능을 사용하기 전에 초점을 바꾸려는 시도 사이를 일시 중지합니다.

function pause(milliseconds) {
    var dt = new Date();
    while ((new Date()) - dt <= milliseconds) { /* Do nothing */ }
}

이로 인해 JavaScript가 지속적으로 무언가를하고 있으며 문서가 렌더링하거나 업데이트 할 시간을주지 않았다고 생각합니다. Console.log는이 자물쇠를 깨고 페이지에 초점을 바꿀 수있는 기회를 제공하는 것처럼 보였습니다.

타임 아웃을 사용하여 시도 사이에 일시 정지에 대한 접근 방식을 변경했을 때 Console.log는 더 이상 필요하지 않았습니다!

올바른 방향으로 나를 지적 해 준 Bmoeskau에게 감사드립니다.

다른 팁

나는 당신의 문제가 거짓을 반환 한 후 당신의 초점 방법을 호출하고 있다고 생각합니다. 코드는 다음과 같아야합니다. 

<a href="#" 
    onclick="show_lightbox();focus_on_lightbox();return false;">
    show lightbox
</a>

내 경험에 따르면, 초점 문제는 때때로 타이밍과 관련 될 수 있습니다 (예 : 요소가 집중할 준비가되기 전에 Focus () 실행). show_lightbox 함수가 호출 될 때 Lightbox 마크 업이 동적으로 생성된다고 가정합니다. 이 경우 문제인지 확인하기 전에 약간의 지연을 추가 할 수 있습니다.

setTimeout("focus_on_lightbox();", 10);

요소 자체에 초점을 맞 춥니 다. 요소의로드 이벤트에서 몇ms의 시간 초과를 설정 한 다음 this.focus ()를 호출하십시오.

그렇지 않으면 jQuery를 시도하십시오.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top