使用跨度而不是輸入有什么好處

Question

我注意到在Facebook和Twitter等幾個網站上 ，他們不使用標記中的常規<input>字段，而是使用<span>並使用JavaScript附加用戶在其上鍵入的內容。

當用戶向其他用戶發送直接消息，用戶發布消息以及在帖子上發表評論時，都會使用此過程。

我想不出任何可能的原因，為什么這對於使用HTML5原生<input>標簽是有益的。

那么使用這種方法有什么好處呢？ 如果沒有， 他們為什么要這樣做？

Answer 1

標准input元素僅限於純文本輸入。 這適用於您正在尋找用戶輸入的大多數情況。

然而，Facebook和Twitter都提供了超越純文本的東西：

正如您所看到的，除了純文本之外還有更多內容：格式化。 Facebook和Twitter都支持內聯格式化特殊內容，如提及和哈希標記。 為了以不同的樣式格式化它們，它們不能使用input元素，但必須以不同的方式呈現內容。

相反，他們使用內容可編輯的元素來允許用戶輸入內容，同時仍然支持完整的格式化功能。

請注意，盡管contenteditable提供了許多格式化內容的方法，但如果您構建更復雜的內容，它也可能是一場噩夢。 中，誰提供了一個非常強大和有用的文本編輯器，之前已經寫過關於該主題 ，關於他們如何構建他們的編輯器，他們遇到了什么問題，以及他們如何試圖解決它。

Answer 2

甲span或div元件可以是可編輯的（和用於視圖提供更豐富的選項，如@autocomplete和#hashtag例如。

要使span可編輯，您只需使用contenteditable="true" ：

 span { border: 1px solid gray; display: inline-block; width: 55px; height: 25px; font-family: arial; color: red; } 

 <span contenteditable="true"></span> 

上面的示例僅顯示如何創建元素可編輯（您不需要任何javascript），但如果您想要一些增強選項 - 您只能使用可編輯元素（而不是常規input元素）。

這是來自facebook來源的圖片：
您可以在第3行看到contenteditable="true"