嵌套文件输入在Firefox中不起作用

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。您对我如何在Firefox中获得此功能有任何想法吗？

Answer 1

行为差异的原因很可能是代码无效。

请参阅HTML 4: 17.4 The INPUT element：“开始标记：必需，结束标记：禁止”

因此，您无法将输入标记嵌套在另一个内。不同的浏览器以不同的方式处理无效标记，因此它们可以例如忽略一个在另一个内部并将它们放在一起，或者完全忽略内部标记。

如果您感到好奇，可以使用FireBug来检查DOM以找出从标记中创建的元素，但实际上没有用，因为无效标记无论如何都无法可靠地工作。