嵌套文件输入在Firefox中不起作用 [英] Nested file input doesn't work in Firefox

问题描述

我有以下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中得到这个，你有什么想法吗？

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?

推荐答案

可能代码无效。

请参阅 HTML 4：17.4 INPUT元素：开始标签：必需，结束标签：禁止

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.

是好奇的，你可以使用FireBug来检查DOM，以找出从标记创建什么元素，但​​它真的可笑，因为无效的标记将无法正常工作。

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.

这篇关于嵌套文件输入在Firefox中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！