html - 嵌套文件输入在 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 以找出哪些元素是从标记创建的，但这确实没有实际意义，因为无效标记无论如何都无法可靠地工作。