<pedrocorreia.net ⁄>
 

<Expanding Text Areas Made Elegant ⁄ >




clicks: 2813 2813 2011-11-05 2011-11-05 goto programacao myNews programacao  Bookmark This Bookmark This


An expanding text area is a multi-line text input field that expands in height to fit its contents. This UI element is commonly found in both desktop and mobile applications, such as the SMS composition field on the iPhone. Examples can also be found on the web, including on Facebook, where it's used extensively. It's a good choice wherever you don't know how much text the user will write and you want to keep the layout compact; as such, it's especially useful on interfaces targeted at smartphones.

Despite the ubiquity of this control, there's no way to create it using only HTML and CSS. While normal block-level elements (like a div, for example) expand to fit their content, the humble textarea does not, even if you style it as display: block. Since this is the only way to accept multi-line user input (other than using contenteditable, a whole world of pain I'm not going to dive into today), a little JavaScript is needed to make it resize as desired.



este é só um excerto do artigo, para aceder ao artigo completo, clique no link em baixo:
this is just a small excerpt from the article, to access the full article please click in the link below:

http://www.alistapart.com/articles/expanding-text-areas-made-elegant/




Subscribe News RSS  Subscribe News Updates by E-mail





myNews <myNews show="rand" cat="programacao" ⁄>

RouterJs: easy routing for your ajax Web applications new ...

RouterJs is a simple router for your ajax web apps. It's build upon History.js which means that Rout (...)

clicks: 16190 16190 2012-05-14 2012-05-14 goto url (new window) haithembelhaj.g... goto myNews programacao


Backbone computed properties new ...

This gist shows one way to implement read- and write-enabled computed properties on a Backbone Model (...)

clicks: 16010 16010 2012-05-13 2012-05-13 goto url (new window) https://gist.gi... goto myNews programacao


Android Query new ...

Android-Query (AQuery) is a light-weight library for doing asynchronous tasks and manipulating UI el (...)

clicks: 16236 16236 2012-05-12 2012-05-12 goto url (new window) code.google.com... goto myNews programacao


HTML5 jQuery Paint Plugin new ...

Websanova Paint is a HTML5 canvas based jQuery plugin. It allows you to free paint on a canvas area (...)

clicks: 26780 26780 2012-05-12 2012-05-12 goto url (new window) websanova.com/t... goto myNews programacao


Create Instagram Filters With PHP new ...

In this tutorial, I'll demonstrate how to create vintage (just like Instagram does) photos with PHP (...)

clicks: 15681 15681 2012-05-12 2012-05-12 goto url (new window) net.tutsplus.co... goto myNews programacao


Real-time Applications With Node.js and Socket.IO new ...

Hey everyone! Sorry about the long pause since the last blog post, life has been quite hectic for th (...)

clicks: 16088 16088 2012-05-11 2012-05-11 goto url (new window) codingcookies.c... goto myNews programacao


Sass vs. LESS vs. Stylus: Preprocessor Shootout new ...

CSS3 preprocessors are languages written for the sole purpose of adding cool, inventive features to (...)

clicks: 15403 15403 2012-05-11 2012-05-11 goto url (new window) net.tutsplus.co... goto myNews programacao


Gettings to know Backbone.ks new ...

In this series, we're going to learn how to build a fully functional contacts manager using Backbone (...)

clicks: 15001 15001 2012-05-10 2012-05-10 goto url (new window) net.tutsplus.co... goto myNews programacao