文件輸入內部contenteditable div不工作在FireFox

我有一個contenteditable div。在這個div裏面，有一個輸入文件。但是，此輸入文件無法瀏覽文件。當我從div中刪除contenteditable的屬性時，輸入文件能夠瀏覽文件。怎麼了？文件輸入內部contenteditable div不工作在FireFox

<div contenteditable="true"> 
 
    <input type="file"/> 
 
</div> 
 

 
versus 
 

 
<div> 
 
    <input type="file"/> 
 
</div>

來源

2015-04-06 iyal

它似乎在Chrome中適用於我。你在哪個瀏覽器上？和控制檯中的任何錯誤？ – 2015-04-06 11:09:42

我將示例更改爲片段，使其他人測試的速度更快。我在FF（和FF12）中遇到同樣的行爲。它似乎在IE中工作。 – GitaarLAB 2015-04-06 11:14:20

是的，它在FF中不起作用。我使用FF。我愛FF。 :) – iyal 2015-04-06 11:18:42

我可以證實這種行爲（目前未在know-issues over at CanIUse for contenteditable）用於Firefox。

WHATWG的規範上contenteditable狀態：

的contenteditable內容屬性是一個enumerated attribute中的關鍵字：
的空字符串，true和false。
空字符串和true關鍵字映射到真實狀態。
false關鍵字映射到虛假狀態。
另外，還有第三種狀態，繼承狀態，這是missing value default（和invalid value default）。

真實狀態表示該元素是可編輯的。 繼承狀態指示如果元素的父元素爲可編輯元素。 假狀態指示元素不可編輯。

的MDN entry on 'Content Editable'狀態：

在HTML5任何元件可以是可編輯的。

但隨後繼續稍後於：

它可以在幾乎所有的HTML元素中。

但是，沒有指定它可以（不）被使用的元素。

這是我的測試結果爲Firefox（注意，這並不似乎是一個近期的迴歸，FF12的工作方式）：

01 <input type="file" />       WORKS    <br> 
 
02 <input type="file" contenteditable="true" />  DOES NOT WORK  <br> 
 
03 <input type="file" contenteditable="" />   WORKS (wtf?)  <br> 
 
04 <input type="file" contenteditable="false" /> WORKS    <br> 
 
05 <input type="file" contenteditable="foobar" /> WORKS    <br> 
 

 
<div> 
 
    06 <input type="file" />       WORKS 
 
</div> 
 

 
<div contenteditable="true"> 
 
    07 <input type="file" />       DOES NOT WORK 
 
</div> 
 

 
<div contenteditable="true"> 
 
    <div contenteditable="false"> 
 
    08 <input type="file" />      WORKS 
 
    </div> 
 
</div> 
 

 
<div contenteditable="true"> 
 
    09 <input type="file" contenteditable="true" /> DOES NOT WORK 
 
</div> 
 

 
<div contenteditable="true"> 
 
    10 <input type="file" contenteditable="" />  DOES NOT WORK 
 
</div> 
 

 
<div contenteditable="true"> 
 
    11 <input type="file" contenteditable="false" /> DOES NOT WORK 
 
</div> 
 

 
<div contenteditable="true"> 
 
    12 <input type="file" contenteditable="foobar" /> DOES NOT WORK 
 
</div> 
 

 
<button onclick=" 
 
    document.getElementsByTagName('div')[1].setAttribute('contenteditable','false'); 
 
">set parent div for 07 to contenteditable="false" to make it WORK</button>

注意測試3（矛盾），8（雖然這可能不是你想要的..）和11（這對我來說是矛盾的）。現在

，我期望正在發生，
是，Firefox的開發人員閱讀 ~~龍與地下城&龍~~ Drag & Drop model的安全部分6.7.9：

考慮一個敵對的網頁提供一些內容，並讓用戶選擇並拖放（或實際上，複製並粘貼）該內容到受害者頁面的區域contenteditable區域。如果瀏覽器不能確保只有安全內容被拖動，選擇中的潛在不安全內容（如腳本和事件處理程序）一旦丟棄（或粘貼）到受害站點中，就可以獲得受害站點的特權。 這會因此導致跨站腳本攻擊。

並採取了更進一步的措施（試圖保護用戶）。
D & D你有什麼問題？以及從運行的測試代碼片段中選擇01 [____][Browse] WORKS，然後將其拖入（&下拉）（^）：09 [____][Browse] DOES NO^T WORK ...（並查看工作輸入的副本也不起作用）。但是，這並不能解釋測試3，或8或...（我猜測至少測試3是一個錯誤），事實上，我仍然在這裏撓我的腦袋;但是，這並不能解釋測試3或8。我瞭解一些繼承，但這看起來不一致。

我喜歡看到有人張貼更好的答案在這裏（我張貼這是因爲答案，因爲它顯然是多的評論，但不覺得這是一個明確的答案要麼...）

編輯：
我添加了一個按鈕，設置CONTENTEDITABLE爲false測試7的父DIV點擊它使測試工作7測試。

這實際上可能是一個解決方案（取決於你在做什麼）。
看起來，這種行爲類型強制實時所見即所得（可選地與原始源選項卡/區域）AND和實際呈現的事物（'預覽'）的'模型'。
就像郵件編輯器中的三個選項卡（例如）：所見即所得，源代碼，預覽...
這意味着您可以有一個「虛擬」選項卡，該選項卡在激活時只會切換contenteditable所見即所得編輯器區域爲false。
如果需要（我迄今爲止沒有測試過），可以考慮將所見即所得區域的實時innerHTML複製到預覽區域。
因此，似乎解決方案是採用此模型來支持firefox ..

來源

2015-04-06 14:28:59 GitaarLAB

文件輸入內部contenteditable div不工作在FireFox

回答

相關問題