The web needs a new textarea

Of all the elements that are available for us to build websites, input and textarea are probably the most central. They are central because that's what developer uses to let user create content.

Google, Facebook, Twitter, Pinterest, everyone uses it.

And while the needs towards those elements have risen over the years, the elements themselves have pretty much stayed the same. But while they have stagnated over the years, other less used elements such as WebGL has seen explosive growth over the years.

So what does that mean? I believe that everyone @ W3C understands that textareas are very limited. Hell, everyone who has built a website knows how limited textareas are. You just can't do much with them.

And to try and make textarea useful for users, developers needed a lot of creativity. And a lot of JavaScript.

But even with JavaScript, you reach the limit of what's possible with textarea. And now, there's pretty much two options right now. The first option is to set the visibility to hidden on the textarea and overlay the element with normal DOM elements. This way, the user types in the textarea but sees a render version of what he types. From what I can tell, that's how the ACE editor started.

The other option is to use contenteditable. Contenteditable element are more flexible than the textarea, but their behaviour is chaotic. You need to write quite a bit of JavaScript before you can get a usable and predictable contenteditable element.

Today, there's no solution that exists within the DOM that can give rich text editing without spending a lot of effort manipulating elements in JavaScript.

And since everyone does it, I think it would save a lot money and time if the textarea element had the foundation for rich text editing. So, what would make a textarea useful in 2015?

Autoresize textarea

There's no reason why this one doesn't exist today. Every other element can grow depending on their content. Textarea is an exception in this regard. It needs to grow & shrink as the content changes. Don't need to say more about this.

Tokenize the content

Tokenizing the content is what could make a textarea really shine. It could be an interface that takes multiple regular expressions and emit an event when one of the expression is matched. Here's an idea of what I mean:

// Markdown word styling used: // https://github.com/pothibo/ecrire/blob/master/lib/ecrire/app/assets/javascripts/admin/editor/parsers/word.coffee textarea = document.querySelector('textarea') textarea.tokenizers().add(/((\{1,2})[^\]+(\*{1,2}))/gi) document.addEventListener(textarea.tokenizers(), 'found', function(el, matches, regex) {})

Ideally, when a regular expression is match, the tokenizer would replace the matched string with a new node, one that implements the HTMLElement interface. This way, the element could be styled.

If an element was matched previously and doesn't match anymore, the element could be replaced by a text node or something similar. The goal would be that if the node doesn't match anything anymore, it would lose all its styling and become normal text again.

Embedded matches could also exist since the children would inherit the parent's style.

The tokenizer would be very useful for many different situations. Also, it would be the developers responsibility to keep the textarea snappy. If a textarea has 100s of easy to match regular expressions, the textarea wouldn't be as snappy as one with just a few. But that's the kind of thing that needs to be left in the hand of the developers.

When the form is sent, the textContent would be the only thing sent. The style and everything else would be lost in the transport, which is to be expected.

Starting somewhere

I think that if those 2 feature could make it to the textarea, a lot of that hacks that we need today would become obsolete. We could create rich text editor for comments and everything else. And everyone could easily set their own styling guideline as they see it fit.

It's obviously easier said than done, but I think it's time for textarea to see some love. I want to use it over contenteditable but I can't.

Get more ideas like this to your inbox

You will never receive spam, ever.