2012-02-17 10 views
7

창, 문서 또는 본문에 첨부하면 Android 브라우저에서 javascript 포커스 및 흐림 이벤트가 올바르게 실행되지 않습니다. ,안드로이드 브라우저에서 창 포커스 및 흐림 이벤트가 올바르게 작동하지 않습니다.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" /> 
    <title>Focus test</title> 

    <script type="text/javascript"> 

     window.onfocus = function() { 
      document.getElementById('console').innerHTML += '<div>Focus event handler fired.</div>'; 
     }; 
     window.onblur = function() { 
      document.getElementById('console').innerHTML += '<div>Blur event handler fired.</div>'; 
     }; 

    </script> 
</head> 

<body> 
    <input id="test" name="test" /> 
    <div id="console"></div> 
</body> 

</html> 

기계류는 양식 입력이 점점되는 경우 있음 초점 :

나는 데스크톱 브라우저에서 제대로 작동하는 간단한 테스트 스크립트를 worte하지만, 안드로이드 재고 브라우저, 돌핀, 오페라 모바일에서 실패 이벤트 핸들러가 실행되고 blur에 blur 이벤트 핸들러가 두 번 발생합니다.

아무에게도 좋은 해결책이나 해결책이 있습니까?

편집 : 예상되는 결과는 브라우저 탭을 변경하거나 다른 앱으로 변경하면 흐림 이벤트가 발생하고 브라우저 탭으로 돌아 가면 포커스 이벤트가 실행된다는 것입니다. 그게 바탕 화면에서 작동하는 방법입니다)

+0

jQuery를 사용해 보셨습니까? 이벤트의 정규화가 많아서 다른 브라우저에서 일관성을 유지합니다. – Walf

+0

예, 저는 jQuery로 시작했습니다. 그저 jQuery 버그를 제외하기 위해 예제를 일반 자바 스크립트로 제거했습니다. – dioslaska

+0

Android 브라우저에서 예를 통해 예상되는 결과는 무엇입니까? – Uooo

답변

0

나는 (내가 가진 모든) 갤럭시 넥서스 실행 코드에서 코드를 테스트했으며이 코드는 완벽하게 작동하며 두 이벤트는 각각 한 번씩 만 실행됩니다.

document.getElementById('test').onfocus = function() { 
    document.getElementById('console').innerHTML += '<div>Focus event handler fired.</div>'; 
}; 
document.getElementById('test').onblur = function() { 
    document.getElementById('console').innerHTML += '<div>Blur event handler fired.</div>'; 
};​ 

대부분의 휴대 기기에서는 보통 '흐리게 처리'할 수없는 창이 될 수 있습니다. 직접 요소에 자체 흐림 및 포커스 이벤트를보고하도록 요청하십시오.

편집 : 또한 이벤트 수신기를 적용하기 전에 DOM 준비가 완료 될 때까지 기다리는 지 확인하십시오.

+1

문서 요소에서 작동한다는 것을 알고 있지만 특히 window 요소를 사용하려고합니다. 예상되는 결과는 브라우저 탭을 변경하거나 다른 앱으로 변경하면 blur 이벤트가 발생해야하고 브라우저 탭으로 돌아 가면 포커스 이벤트가 실행되어야한다는 것입니다 (데스크톱에서 작동하는 방식입니다) – dioslaska

관련 문제