爲什麼CONTENTEDITABLE =「真」產生髒HTML

當我使CONTENTEDITABLE這樣的：爲什麼CONTENTEDITABLE =「真」產生髒HTML

<div contenteditable="true"> 
    Hello world 
</div>

內容添加到它通過只輸入並使用輸入產生壞/髒HTML：

<div contenteditable="true"> 
    Hello world 
    <div><br></div> 
    <div>How are you doing. I am doing just fine!</div> 
    <div><br></div> 
    <div><br></div> 
    <div>New line of text</div> 
</div>

正如你所看到的每一個分頁符都有一個<div>在內部使用<br>。這是爲什麼，這是正確的語義HTML。在我看來，它會更像這樣：

<div contenteditable="true"> 
    <p>Hello world</p> 
    <p>How are you doing. I am doing just fine!</p> 
    <br> 
    <p>New line of text</p> 
</div>

來源

2014-02-28 botenvouwer

爲什麼不用'textarea'代替？ –

看來每個瀏覽器廠商都有自己的方法，目前還沒有定義標準的做法。 –

@BramVanroy因爲我想編輯HTML而不是純文本。順便說一句，我只是試驗contenteditable，我想知道爲什麼它的行爲是這樣的。回答如下：'Just use teaxtarea'或'Use tinymce'並不是我正在等待的地方！ – botenvouwer

這一切都歸結到歷史。 contenteditable屬性最初是Microsoft特定的。它在HTML5存在之前被添加到IE5.5的方式。由於它被證明是有用的，但沒有規範，每個供應商都反向設計它[1]，並添加它自己的小轉折（當沒有規範時往往會發生）。由於每個供應商都以不同的方式實施它，並且流行的網站[ 2]使用它來解決這些差異，每個供應商很難在不破壞這些網站的情況下對一個共同的行爲進行標準化。所以我們最終被卡住了。例如，當您按Enter鍵時，Opera會將其添加到您說的更喜歡的方式，而Safari/WebKit使用的是< div> s，而Firefox使用的是< s。

一些reverse engineering notes從Opera的安妮麪包車Kesteren的
我記得的Writely（現更名爲谷歌文檔），作爲一個典型的例子，當我曾在歌劇。

來源

2014-02-28 08:22:06

contenteditable="true"屬性已被定義爲使元素內容可由用戶編輯。用戶界面一直依賴於瀏覽器。這也適用於處理回車，這實際上變化很大。有些瀏覽器會生成br元素，有些會生成div元素，有些會生成p元素等。

有關「語義標記」的問題在這裏沒有意義。瀏覽器無法通過輸入知道用戶意味着什麼，所以它不可能選擇與意義對應的標記 - 即使在通常使用口號「語義標記」的鬆散意義上，即結構。例如，如果用戶輸入一些文本，將其加粗並按Enter，那麼他很可能意味着它是一個標題 - 但瀏覽器實際上並不知道（並且更不能猜測它是否應該是，例如，h2或h3）。

有兩種方法可以處理Enter問題。您可以爲該元素設置onkeypress事件處理程序，並嘗試處理Enter方式。但這不會影響複製和粘貼操作;當插入多行文本時，瀏覽器會以不同的方式處理換行符。

另一種方式是處理處理用戶輸入內容的多樣性。在那裏你可以按照你想要的方式規範事物。儘管如此，用戶可能會在他的內容顯示在瀏覽器中時產生錯誤的印象。

來源

2014-02-28 09:04:44

爲什麼CONTENTEDITABLE =「真」產生髒HTML

回答

相關問題