what benefits are there to using a span instead of input

Question

I've noticed on a couple of websites such as Facebook, and Twitter that instead of using regular <input> fields in their markup, they use a <span> and append what the user types onto it using JavaScript.

This process is used both, when a user sends direct messages to other users, when a user posts, and when a comment is made on a post.

I can't think of any possible reason as to why this would be beneficial to use over the HTML5 native <input> tag..

So what are the benefits of using this method? And if there aren't any, why are they doing it?

Answer 1

A standard input element is limited to plain text input. This works fine for most situations where you are looking for input from the user.

However, both Facebook and Twitter offer something that goes beyond plain text:

As you can see, there is more to it than just plain text: Formatting. Both Facebook and Twitter support inline formatting for special things like mentions and hash tags. In order to format these in a different style, they cannot use an input element but have to render the content differently.

Instead, they use a content-editable element to allow users to input content while still supporting full formatting capabilities.

Note that while contenteditable offers many ways to format stuff, it can also be a nightmare if you’re building something more complex. Medium, who do offer a very powerful and useful text editor, has written about that topic before, about how they built their editor, what problems they encountered, and how they tried to get around it.