The project can be compact!

QArea Expert by QArea Expert on December 25, 2011

The project can be compact!
Reading Time: 7 minutes

codeThe project can be compact, no matter how long it is! Just need a code.
An ever-growing text sphere is a multi-line words input territory that increases in highness to fit its maintenance. This UI component is ordinarily found in both desk-mounted and mobile software, such as the SMS coordination field on the iPhone. Exponents can also be retrieved on the web, containing on Facebook, where it’s used sweepingly. It’s a good selection wherever you can’t resolute how much text the customer will write and you admire to keep the project indiscrete; as such, it’s particularly useful on contact surfaces targeted at smartphones.

Despite the omnipresence of this measurement, there’s no way to build it up using only HTML and CSS. While standard block-level components (for instant a div) increase to fit their maintenance, the obedient text space does not, even in case you modernize it as video display: block. Since this is the only-begotten way to acknowledge multi-line customer inlet (other than utilizing maintenance editable), a negligible JavaScript is demanded to make it resize as desiderated.

Creeping the internet, it is possible to find some endeavors at creating enlarging text areas, but most tolerate from one or another of the proximate problems:

  • The highness is estimated by conjecture where wrappage occurs founded on the cols attribute. This will break if you determine the broadness of the text space in CSS, use a commensurable broadness font, or merely don’t administer a cols determination.
  • The highness is recalculated and determine only on the key-up (and presumably cut and paste) actions. This can’t be employed if the text space has a changeable broadness and the window is resized.
  • The demandable highness is computed based on the scroll Height definition, which is not admonished in any W3C occurrences (it was implemented by IE) and in this manner unsurprisingly has imperceptible dissemblance between intercalations, necessitating an inelegant and breakable morsel of browser-sniffing code.

The best settlement ever seen uses an abstracted pre component absolutely ascertained off screen modernized the same as the text area; let’s designate this part as the mirror element. Utilizing set Timeout, the text space is then edged every 200 ms or so, and each bout a new consequence is retrieved, the maintenance of the mirror element is accomplished. This afterwards automatically sizes to be suited to its content (as a standard block-level component does), after this action the size can be extracted from the displacement Height property and employ that back to the text space.

This technique works, but the polling is inefficacious, particularly if you have multiple words space. Worse, if flexible-broadness text territories are supported then check-up of the broadness of the text area is needed; it shouldn’t have modified on each poll as well (an sumptuous read to displaced Width). It can be complicated to compute the adequate broadness of the content-box in the text direction; consequently there’s commonly a “jobbish factor” appended to the height employed to the text space, just to make certain it’s not fractionally too diminutive, turning out in a box that’s afterwards fractionally too gross for the alimentation. Here let us watch a better resolution to the imbroglio, which sizes the text territory using barely the smallest offcut of JavaScript thaumaturgies along with some disingenuous CSS.

The methodology is betterment on the clandestine – designated mirror component. The first demanded enhancement is related to how we identify lead-in. The intermission event is not perfect as it barely fires when the text space casts juggle. The key-up occurrence works in most situations, but also fires on occurrences where no real intermission has been performed, such as switching around the tracking symbol left and right; and it does not fire if the customer uses the mouse to paste or cut. What is really desired an occurrence that just fires every time the consequence of the text territory reverses. Thankfully, such an occurrence prevails and it’s dreadfully wholesome, nevertheless it’s noticed so seldom it would seem many are unapprised of its subsistence. The occurrence is easily named input, and is used just similarly to any other occurrence:

textarea.addEventListener('input', function (event) {

/* Code to handle event */

}, false );

So the first enhancement is to intercept polling utilizing set Timeout and in place of using the much more effective input occurrence. This is protected cross-browser, even in Internet Explorer starting from release 9, even though undoubtedly there is an IE bug: it can’t fire when you remove text, so the territory will not decrease until text is appended again. If this is a necessity it is also possible to watch for the key-up occurrence in IE to catch most situations.

For IE8 the possessory on property change occurrence will be helpful, which also fires any time the consequence proprietorship metamorphoses. This occurrence is also comprehensible on versions younger than 8, but a several small CSS pinches will presumably be demanded to make the ever-growing text space work all-embracing; let’s leave making it function in IE6 or IE7 as a training to the readers unfortunate considerably to have to countenance those cobwebby browsers.

Now, somebody of you may have disclosed that, as we’re no more polling, the text space won’t resize if it has a changeable broadness and the window is resized. That affords us to our next enhancement: we ought to make the browser resize the text territory automatically. But, it was thought to be impossible? Well, not entirely. It can not be done automatically just using HTML and CSS, but all the JS development demands to do is upgrade the mirror component with the consequence of the text space. It doesn’t have to proportionate or accurately set highness. The contrivance is to bestow the text territory on top of the mirror component, both within a respectively-distributed including div. The text space is misarranged irrespectively and given a broadness and highness of 100% to make it infest the div. The reflection is misarranged statically so it will enlarge to correspond to its alimentation. The comprising div will then enlarge to fit the highness of the reflection and this in twist will make the theoretically misarranged text territory resize to fill the receptacle, thus performing it the irreproachable highness to correspond to its maintenance.

OK, the plenty of explanation, we need the code!
The pre stands for the mirror. A br at the end is needed of it to assure that any creeping whitespace simulated from the text territory is accommodated by the browser legitimately and not pissed-off. The span component is consequently the one in point of fact updated with the alimentation of the text space.

This is the CSS. First, a miniature restoration:


pre {

margin: 0;

padding: 0;

outline: 0;

border: 0;


Comprising components have the enlarging Area class. Any border or entrance box-shadow can be defined, here that you desire to utilize to modernize your text space. A simple 1px solid gray border was added. A min-height property is able to be used if needed and it will function as expected:

.expandingArea {

position: relative;

border: 1px solid #888;

background: #fff;


Different paddings can be set, line highness, and font manners, just make certain they’re similar for both the text territory and the pre component:

.expandingArea > textarea,

.expandingArea > pre {

padding: 5px;

background: transparent;

font: 400 13px/16px helvetica, arial, sans-serif;

/* Make the text soft-wrap */

white-space: pre-wrap;

word-wrap: break-word;


.expandingArea > textarea {

/* The border-box box model is used to allow

* padding whilst still keeping the overall width

* at exactly that of the containing element.

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

-ms-box-sizing: border-box;

box-sizing: border-box;

width: 100%;

/* This height is used when JS is disabled */

height: 100px;

} > textarea {

/* Hide any scrollbars */

overflow: hidden;

position: absolute;

top: 0;

left: 0;

height: 100%;

/* Remove WebKit user-resize widget */

resize: none;


.expandingArea > pre {

display: none;

} > pre {

display: block;

/* Hide the text; just using it for sizing */

visibility: hidden;


And at last the following JavaScript should be used. For conciseness let’s omit the ordinary characteristic revelation needed to be done before using interrogation Selector() or interrogation Selector All(). In the best tradition of lightsome abasement, customers without JavaScript empowered will get an organized height text space (with the highness complement in the CSS), with scroll bars emerging when the content overcrowds:


function makeExpandingArea(container) {

var area = container.querySelector(‘textarea’);

var span = container.querySelector(‘span’);

if (area.addEventListener) {

area.addEventListener(‘input’, function() {

span.textContent = area.value;

}, false);

span.textContent = area.value;

} else if (area.attachEvent) {

// IE8 compatibility

area.attachEvent(‘onpropertychange’, function() {

span.innerText = area.value;


span.innerText = area.value;


// Enable extra CSS

container.className += ‘ active’;


var areas = document.querySelectorAll(‘.expandingArea’);

var l = areas.length;

while (l–) {



A notation on deputation: this can easily be set up with a single occurrence hearer on the document nodal point and use occurrence deputation to regulate multitudinous increasing text territory effectively, but without IE8 or below support, as Microsoft, in their interminable oracularity, did not make the on property change occurrence bladder.

Concluding memorials

Thanks to the way redraws are downloaded in Opera for Mac Operation System X, a low-level twinkle may come into existence when a fresh line is supplemented to the text territory. Possible to work around this by perennially making it a line lanker than it demands to appear in Opera on Mac; just supplementing the following code to the helm of the make Expanding Area fluent (there’s no chance to do detailed detection for this):


if ( window.opera && /Mac OS X/.test( navigator.appVersion ) ) {

container.querySelector( ‘pre’ )


document.createElement( ‘br’ )



In conclusion, where through the text territory is misarranged distinctly over the pre, you can increase this to do excellent material such as syntax highlighting while typing; if you dismantle the consequence and splinter it into various tags before appending it to the pre, you can employ various colors to different subdivisions. You’ll demand to extract the appearance: hidden proclamation from the pre and in place of add color: crystalline to the text space. We use this methodology in My Opera Mail to model it simpler to scan the titles in the To/Cc/Bcc spaces of the compose window. The hindrance is that all browsers different from Opera make the tracking symbol color similar to the text color, so the tracking symbol evaporates when you make the color crystalline. No W3C standard catches this, but the framework standard (founded on the text editors dropped with them) presents to be the contradiction of the background bloom on Windows and usually black on Macintosh, irrespectively of background or foreground bloom. But till the other browsers witness the glim and record this proceeding you can still employ the syntax highlighting on black discoloration and switch it off while the customer is really editing, or modifying the background color in substitution.

And that’s it! Happy hacking!