使用跨度而不是输入有什么好处

Question

我已经注意到 Facebook 和 Twitter 等几个网站，而不是在标记中使用常规<input>字段，使用<span>并使用 JavaScript 附加用户在其上键入的内容。

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

我无法想出为什么这会对HTML5原生<input>标记使用有益。

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

Answer 1

标准input element仅限于纯文本输入。这适用于您正在寻找用户输入的大多数情况。

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

正如您所看到的，除了纯文本之外还有更多内容：格式化。 Facebook和Twitter都支持内联格式化特殊内容，如提及和哈希标记。为了以不同的样式格式化它们，它们不能使用input元素，但必须以不同的方式呈现内容。

相反，他们使用content-editable element来允许用户输入内容，同时仍然支持完整的格式化功能。

请注意，尽管contenteditable提供了许多格式化内容的方法，但如果您构建更复杂的内容，它也可能是一场噩梦。中，谁提供了一个非常强大和有用的文本编辑器，written about that topic before，关于他们如何构建他们的编辑器，他们遇到了什么问题，以及他们如何试图解决它。

Answer 2

span或div元素可以编辑（并为视图提供更丰富的选项，例如@autocomplete和#hashtag。

要使span可编辑，您只需使用contenteditable="true"：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

以上示例仅显示如何创建可编辑元素（您不需要任何javascript），但如果您想要一些增强选项 - 您只能使用可编辑元素（而不是常规元素） input元素。）

这是来自facebook来源的图片：
您可以在第3行看到contenteditable="true"