회사의 WEB 프로젝트 요구사항은 FF3 및 IE6/7/8과 호환되어야 합니다. 이 기사에서는 IE6에서의 BUG에 대해 설명합니다.
프로젝트에서는 마스크 레이어를 먼저 동적으로 추가한 다음 DIV(테이블) 레이어를 동적으로 추가하는 것이 원칙입니다. (팝업 레이어 PNG 반투명 테두리 효과를 만들기 위해) IFrame이 DIV에 동적으로 추가되고 이 Iframe 페이지는 기존 HTM 파일을 가리킵니다.
이 HTM 파일에 텍스트 입력 상자와 같은 일부 양식 요소가 포함되어 있으면 IE6에서 문제가 발생할 수 있습니다.
테스트 그룹 사람들은 팝업 레이어가 열린 후 텍스트 상자의 포커스를 "자주" 얻을 수 없다고 말했습니다. 마치 투명한 레이어로 덮여 있는 것처럼 마우스가 클릭됩니다. 그러나 때때로 이는 정상이며 간헐적 정신 장애로 설명될 수 있습니다. 어떤 기계는 등장 확률이 50%이고, 어떤 기계는 등장 확률이 30%입니다.
일부 테스트와 분석은 불가피합니다.
가상머신 IE6에서 테스트해본 결과, 테스트 그룹 분들의 말씀이 사실이라는 것도 알게 되었습니다.
텍스트 상자를 제외하고 그 주변의 모든 텍스트는 마우스로 정상적으로 선택할 수 있고 텍스트 상자 자체를 포함한 주변의 모든 요소도 onclick 이벤트에 응답할 수 있기 때문에 추가 오버레이가 없다고 확신합니다. , 그러나 아무리 클릭해도 입력 포커스를 얻을 수 없습니다. (텍스트 상자가 readOnly 또는 비활성화로 설정되어 있지 않습니다.)
그러나 이 Iframe을 마우스 오른쪽 버튼으로 클릭하여 새로 고치거나 'TAB' 키를 누르는 등 일부 작은 동작으로 인해 정상으로 돌아갈 수 있습니다. 포커스를 전환하는 Iframe. 이때 모든 텍스트 상자는 클릭을 통해 정상적으로 포커스를 얻을 수 있습니다. 정말 변태야!
이것이 우리 프로그램이 해결할 수 없는 IE6의 버그라고 말할 수는 없습니다.
많은 노력 끝에도 여전히 해결책이 있습니다.
(보통 첫 번째) 텍스트 상자의 focus() 메서드를 수동으로 호출하면 모든 텍스트 상자를 정상 상태로 복원할 수 있다는 것을 발견했습니다. 그래서 Iframe의 페이지 끝 부분에 있는 첫 번째 텍스트 상자를 가져와서 focus()를 호출하는 공개 스크립트를 작성했습니다. 수백 번 테스트한 후에도 포커스를 얻을 수 없는 상황이 발생하지 않았으며 문제가 발생했습니다. 해결되었습니다.