입력 태그에 autofocus 속성을 사용할 때 onfocus가 호출되지 않습니다.

Question

다음 예제에서 하나의 경고 상자 만 표시됩니다. 나는 JavaScript 코드가 실행되기 전에 포커스가 놓여 있음을 읽었다. 이 작업을 수행 할 수있는 방법이 있습니까?

<input id="i" type="text" autofocus onfocus="alert(1)"> 

<script type="text/javascript"> 
document.getElementById('i').addEventListener('focus', function() { 
    alert(2); 
}, false); 
</script> 

은 (난 단지 사파리에서이 테스트 한)

편집 : 내가 이런 식으로 (Prototypejs 선택) 할 분명히 할 수

var autofocusElement = $$('input[autofocus]')[0]; 
callListener(autofocusElement); 

그러나 그것은 단지 추가에 비해 추한 모습 이벤트 리스너.

편집 :

는 자동 초점 속성에 대한 브라우저 지원의 부족을 이상 걱정하지 마십시오. 그것은 내가 아래에있는 바이올린 링크에서했던 것처럼 쉽게 해결되었습니다. 내가 볼 수있는 문제에 대한 최선의 해결책도있다. 내 질문은 수동으로 청취자를 호출하는 것보다보기 싫어서 할 수있는 경우입니다.

http://jsfiddle.net/tellnes/7TMBJ/3/

그것은 자동 초점을 지원하지 않습니다 파이어 폭스 때문에 파이어 폭스 3.6에서 잘 작동합니다. 그러나 자동 초점을 지원하는 사파리에서는 이벤트가 아닙니다. HTML5 working draft에서

Answer 1

:

는

지정된 autofocus 속성을 가진 문서에 하나 개 이상의 요소가 없어야합니다.

어쨌든 정의되지 않은 동작이 필요합니다.

autofocus 요소가 하나 뿐인 Firefox 3.6에서는 페이지로드시 어느 핸들러도 호출되지 않습니다. 수동으로 요소에 포커스를주는 것은 두 핸들러를 호출합니다 (닫을 때 요소에 다시 포커스를주는 경고 상자로 인해 무한 루프로 진행됩니다).

HTML5의 초안 autofocus가 focus 이벤트를 발생을 포함하여, 페이지로드에 focusing steps을 수행해야한다고 말한다 않지만, 가능성이 브라우저는 현재 전체 또는 일관된 방식으로이 기능을 구현하지 않는 것이 있습니다.

페이지로드 중에 HTML5 스펙이 완료되고 브라우저가 완전한 지원을 위해 목표를 잡을 때까지 명시 적으로 focus 이벤트 핸들러를 호출 할 수 있습니다.당신도 input를 들어, onfocus을 자바 스크립트 코드의 조각을 실행해야하는 경우

Answer 2

, 당신은 jQuery를 사용할 수 있습니다 http://api.jquery.com/focus/이

Answer 3

현재의 예에서 다음 코드 :

<input id="i" type="text" autofocus onfocus="alert(1)"> 

<script type="text/javascript"> 
    document.getElementById('i').addEventListener('focus', function() { 
     alert(2); 
    }, false); 
</script> 

가 원인 예정 2

[eidt]

- 1에서가 경보 무한 루프

때문에 :

입력 자동 초점을 얻는다 (이것은 단지 autofocus를 지원 broswers에서 발생) 경고를 발생 이벤트를 발생, 경고 잡고 초점, 입력 잡고 초점을, 확인을 클릭 이벤트가 이제 두 개의 서로 다른 경고를 트리거 새로운 이벤트를 발생 초점 (DOM이 완전히로드되었으므로 새로운 이벤트가 다른 경고와 함께 추가됨), 두 경고는 모두 포커스를 가져오고, 확인을 클릭하고, 그래버를 입력합니다. 포커스가 새 이벤트를 트리거합니다. 이제 두 개의 다른 경고를 트리거하고, 경고 잡기 포커스, 확인을 클릭 한 다음, 확인을 클릭하고 잡아 당기기 포커스를 입력하고 두 이벤트를 모두 시작한 다음 포커스를 알리고 확인을 클릭하고 다음 경고를 포커스를 잡고 확인을 클릭하고 포커스를 가져오고 두 이벤트를 모두 시작한 다음 포커스를 가져오고 확인을 클릭하고 다음 경고를 포커스로 놓고 확인을 클릭합니다. 두 가지 이벤트를 발생시키고, 두 이벤트를 모두 시작하고, 포커스를 잡아 당기고, 확인을 클릭하고, 다음 이벤트는 포커스를 잡고, 확인을 클릭하고, 포커스를 입력하고, 두 이벤트를 트리거하고, 입력 된 gra bs focus, 두 이벤트 발생, alert grabs focus, ok, 다음 alert 잡기 focus, ok, 입력 잡기 focus, 두 이벤트 모두 실행, 잡기 focus, 두 이벤트 모두 실행, alert grabs focus, ok, 다음 alert 잡기 focus, 확인을 클릭하고 잡기 포커스를 입력하고 두 이벤트를 모두 시작한 후 포커스를 입력하고 두 이벤트를 모두 시작한 다음 알리미를 클릭하고 다음 경고 잡기, 확인을 클릭하고 포커스 잡기, 포커스 잡기, 두 이벤트 발생 ...

텍스트 설명 무한한 과정 FTW! ....? : P

[/ 편집]이 자동으로 초점을 맞추고와 이전의 예에서

는 마지막 하나는 내가 바닥에 부착 한 예에서와 같이 실행되는 것으로 보인다 적용했다. 또한 클래스 이름을 기반으로 각 입력에 포커스 이벤트를 추가하는 방법을 추가했습니다 ...하지만 도움이 될 수도 있지만 당신이 찾고 있다면 확실하지 않습니다.

JSFiddle Example of onfocus event

Answer 4

당신은 자동 초점에 값을 제공해야합니다.
<input id="i" type="text" onfocus="alert(1)" autofocus="">