Nested file input doesn't work in Firefox

问题:

I have the following HTML:

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

Styled like such:

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

It looks like just a standard file input element, as the #inner input element is hidden and wrapped by the #outer one. My desired behavior is to see "Yes!" when I select a file, which I get with Webkit browsers (both inputs activate) but not Firefox. Do you have any ideas about how I can get this in Firefox as well?

回答1:

The reason for the difference in behaviour is most likely that the code is invalid.

See HTML 4: 17.4 The INPUT element: "Start tag: required, End tag: forbidden"

So, you can't nest an input tag inside another. Different browsers handle invalid markup differently, so they can for example ignore that one is inside the other and place them beside each other, or ignore the inner tag completely.

If you are curious, you can use FireBug to examine the DOM to find out what elements are created from the markup, but it's really moot as invalid markup won't work reliably anyway.