嵌套的文件輸入無法在Firefox

工作

<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中獲得這一點嗎？

2011-06-10 Eric Yang

你不應該將內部的Z-Index屬性設置爲比外部的更高的值嗎？ – 2011-06-10 16:06:39

謝謝，但我試過了，它沒有什麼區別。 Z索引可能不會影響相對於父母的元素。 – 2011-06-10 16:11:25

行爲差異的原因很可能是代碼無效。

見HTML 4: 17.4 The INPUT element：「開始標記：需要，結束標記：禁止」

所以，你不能嵌套在另一個內部的輸入標籤。不同的瀏覽器處理無效標記的方式不同，因此它們可以忽略其中一個在另一個內部並將它們放在彼此旁邊，或完全忽略內部標記。

如果您很好奇，可以使用FireBug來檢查DOM，找出哪些元素是從標記中創建的，但它確實沒有實際意義，因爲無效標記無法正常工作。

2011-06-10 16:14:35 Guffa

謝謝。它看起來像Firefox完全忽略了內部標籤，並在Firebug中變灰。我想我必須改變周圍的結構。 – 2011-06-10 16:26:58

回答