How can I make textarea grow without breaking the horizontal layout?

Depending on the audience, letting users resize an input box isn’t always the best option, in addition, resizing in any direction can break a layout. That’s why I prefer this auto-resizing jQuery plugin

Call the function at the bottom of your page.

$(document).ready(function(){
  $("#message").autoGrow();
});




/*!
 * Autogrow Textarea Plugin Version v2.0
 * http://www.technoreply.com/autogrow-textarea-plugin-version-2-0
 *
 * Copyright 2011, Jevin O. Sewaruth
 *
 * Date: March 13, 2011
 */
jQuery.fn.autoGrow = function(){
	return this.each(function(){
		// Variables
		var colsDefault = this.cols;
		var rowsDefault = this.rows;

		//Functions
		var grow = function() {
			growByRef(this);
		}

		var growByRef = function(obj) {
			var linesCount = 0;
			var lines = obj.value.split('\n');

			for (var i=lines.length-1; i>=0; --i)
			{
				linesCount += Math.floor((lines[i].length / colsDefault) + 1);
			}

			if (linesCount >= rowsDefault)
				obj.rows = linesCount + 1;
			else
				obj.rows = rowsDefault;
		}

		var characterWidth = function (obj){
			var characterWidth = 0;
			var temp1 = 0;
			var temp2 = 0;
			var tempCols = obj.cols;

			obj.cols = 1;
			temp1 = obj.offsetWidth;
			obj.cols = 2;
			temp2 = obj.offsetWidth;
			characterWidth = temp2 - temp1;
			obj.cols = tempCols;

			return characterWidth;
		}

		// Manipulations
		this.style.width = "auto";
		this.style.height = "auto";
		this.style.overflow = "hidden";
		this.style.width = ((characterWidth(this) * this.cols) + 6) + "px";
		this.onkeyup = grow;
		this.onfocus = grow;
		this.onblur = grow;
		growByRef(this);
	});
};

Let the above jQuery code do the rest of the work.

Source

Back to Blog