what benefits are there to using a span instead of input

Question

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

This process is used when a user sends direct messages, when they create a post, and when they make comments.

I can't think of any reason why this would be beneficial to use over the 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.