중첩 된 파일 입력 파이어 폭스

Question

에서 작동하지 않습니다

나는 다음과 같은 HTML이 :

<input id="outer" type="file" onchange="console.log('No.');"> 
    <input id="inner" type="file" onchange="console.log('Yes!');" /> 
</input> 

하는 등 같은 스타일이 적용된을 :

#inner { cursor: pointer; position:absolute; opacity: 0; } 
#outer { position: relative; overflow: hidden; direction: ltr; } 

그것은 #inner 입력으로, 단지 표준 파일 입력 요소처럼 보인다 요소가 숨겨지고 #outer으로 감싸 여져 있습니다. 내가 원하는 행동은 "예!"입니다. 파일을 선택할 때 Webkit 브라우저 (두 입력 모두 활성화 됨)를 사용하지만 Firefox는 사용하지 않습니다. 내가 파이어 폭스에서 어떻게 얻을 수 있는지에 대한 아이디어가 있습니까?

Answer 1

동작이 다른 이유는 코드가 유효하지 않기 때문일 수 있습니다.

이 HTML 4: 17.4 The INPUT element를 참조하십시오 : 당신은 둥지를하지, 다른 내부 입력 태그를 그래서

수 있습니다 "시작 태그 : 금지 : 는 종료 태그가 필요". 다른 브라우저는 유효하지 않은 태그를 다르게 처리하므로 예를 들어 다른 태그가 내부에 있고 그 태그를 서로 옆에 배치하거나 내부 태그를 완전히 무시할 수 있습니다.

궁금한 점이 있다면 FireBug를 사용하여 DOM에서 어떤 요소가 마크 업에서 생성되었는지 확인할 수 있습니다. 그러나 유효하지 않은 마크 업은 신뢰할 수있는 방식으로 작동하지 않으므로 실제로는 문제가됩니다.