Javascript 使用范围而不是输入有什么好处

我注意到，在一些网站上，如Facebook和Twitter中，他们没有在标记中使用常规的

字段，而是使用

并使用JavaScript将用户键入的内容附加到标记中

当用户向其他用户发送直接消息时，当用户发帖时，和在帖子上发表评论时，都使用此过程

我想不出任何可能的原因来解释为什么在HTML5原生标签上使用它会有好处

---

那么使用这种方法的好处是什么呢？如果没有，他们为什么要这样做呢？A

span

或

div

元素可以编辑（并为视图提供更丰富的选项，例如

@autocomplete

和

#hashtag

）

要使

span

可编辑，只需使用

contenteditable=“true”

：

span{
边框：1px纯色灰色；
显示：内联块；
宽度：55px；
高度：25px；
字体系列：arial；
颜色：红色；
}

标准仅限于纯文本输入。这适用于大多数需要用户输入的情况

然而，Facebook和Twitter都提供了超越纯文本的功能：

正如您所见，它不仅仅是纯文本：格式化。Facebook和Twitter都支持对特殊内容（如提及和哈希标记）进行内联格式化。为了以不同的样式格式化这些内容，它们不能使用

input

元素，但必须以不同的方式呈现内容

取而代之的是，他们使用了一个允许用户输入内容，同时仍然支持完整的格式化功能

---

请注意，虽然

contenteditable

提供了许多格式化内容的方法，但如果您正在构建更复杂的内容，这也可能是一场噩梦。Medium确实提供了一个非常强大和有用的文本编辑器，他们已经了解了他们如何构建编辑器，遇到了什么问题，以及他们如何设法解决这些问题。

在您可以了解的范围内整理单个单词或字母，或添加链接等（如在评论中标记其他用户）。@nnnnnnnn对他们来说并不是真正有用，因为输入内容在发布之前是不会格式化的。：：如何将微笑、链接、图像等添加到文本区？答案是你不需要；）@epasarello哦，这很有意义：-）谢谢！但即便如此，facebook甚至没有使用

contenteditable

属性。这完全是在Js中完成的。。看看Draft.js，它是可编辑的。。。看看父元素…@Caelan.，如果你说的是facebook，它们确实是。仔细检查：）@Caelan。如果你说的是推特，他们也会；等等，奇怪。。但是，它们实际会在父div上使用它，然后将其全部附加到子范围上。酷：DJust用facebook来源的截图更新了答案