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

Question

我注意到在Facebook和Twitter这样的几个网站上<input>,他们不使用标记中的常规字段,而是使用a <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来源的图片:
你可以看到contenteditable="true"第3行