18

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?

6
  • 3
    In a span you can format individual words or letters, or add links, etc. (Like when you tag other users in a comment.)
    – nnnnnn
    Dec 22, 2016 at 0:11
  • @nnnnnn not really useful to them, as the input isn't formatted until it's posted.. :/
    – GROVER.
    Dec 22, 2016 at 0:12
  • 3
    developer.mozilla.org/en-US/docs/Web/Guide/HTML/… How do you add smiles, links, images, etc into a textarea? Answer is you don't ;) Dec 22, 2016 at 0:12
  • @epascarello ohh, that would make sense :-) thanks! but even then, facebook doesn't even use the contenteditable attribute. It's entirely done in Js.. strange
    – GROVER.
    Dec 22, 2016 at 0:15
  • 1
    Look at Draft.js and it is contenteditable... look at parent elements.... Dec 22, 2016 at 0:17

2 Answers 2

29

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:

Composing example tweet

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.

6

A span or div elements can be editable (and provide richer option for the view, like the @autocomplete and #hashtag for example.

To make a span editable you just use the contenteditable="true":

span {
  border: 1px solid gray;
  display: inline-block;
  width: 55px;
  height: 25px;
  font-family: arial;
  color: red;
}
<span contenteditable="true"></span>

The above example only show how to create the element editable (you don't need any javascript for that), but if you want some enhanced options - you can do it only with the editable elements (and not with regular input element).

This is an image from the facebook source: enter image description here
You can see the contenteditable="true" on the 3rd line

4
  • 1
    @Caelan., if you are talking about facebook - they do. double check :)
    – Dekel
    Dec 22, 2016 at 0:16
  • 1
    @Caelan. And if you’re talking about Twitter, they also do ;D
    – poke
    Dec 22, 2016 at 0:17
  • Oh wait, strange.. They actual do, however, they use it on the parent div, and then append it all onto a child span. Cool :D
    – GROVER.
    Dec 22, 2016 at 0:17
  • Just updated the answer with a screenshot from facebook's source
    – Dekel
    Dec 22, 2016 at 0:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.