Jon
Rohan

This is a ui element I created which takes inspiration from facebook’s excellent growing textarea. Or at least I believe facebook was one of the first to create this.

How it works is when text is typed into the textarea and it becomes longer than the textarea height, then the textarea will grow. I’m keeping this plugin in a github repository, fork it, clone it My Javascript Git Repository.

Demo

The key to making something like this work, is you need to create div element that copies the text from the textarea to the div. The div naturally will grow when it has more text in it. When it does, you get the height of the div element and apply it to the textarea.

Here’s how you would init the growing text box.

$("textarea").growing();

I’ve also added some options you can pass in, growning({maxHeight:300,minHeight:40,buffer:20}) the max and min height are pretty self explainitory. The buffer is the space below the text in the textarea, if you want an extra line below the currently typing line.

The Code

Currently I’m adding a class to the div called faketextarea so I can style it the same as the textarea. This is important becuase if one element has more padding than the other, then the heights will be messed up. and this plugin won’t work exactly right.

.faketextarea, textarea {
  padding: 5px;
  border: 1px solid #efefef;
}

/* Copyright (c) 2009 Jon Rohan (http://dinnermint.org)
 * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
 * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
 *
 * Version: 1.0.0
 * Written with jQuery 1.3.2
 */
(function($){
  $.fn.growing = function(options){
    var settings = $.extend({
       maxHeight: 400,
       minHeight: 40,
       buffer: 0
    }, options);
    return this.each(function(){
      var textarea = $(this); //cache the textarea
      var minh = textarea.height()>settings.minHeight?textarea.height():settings.minHeight;
      var w = parseInt(textarea.width()||textarea.css("width")); //get the width of the textarea
      var div = $("<div class='faketextarea' style='position:absolute;left:-10000px;width:" + w + "px;padding:" + textarea.css("padding") +";border:" + textarea.css("border") + ";'></div>");
      textarea.after(div);
      var resizeBox = function(){
        var html = textarea.val().replace(/(<|>)/g, '').replace(/n/g,"<br>|");
        if(html!=div.html()) {
          div.html(html);
          var h = div.height();
          prevh = textarea.height();
          var newh = h<=minh?minh:(h>settings.maxHeight?settings.maxHeight:h);
          newh += settings.buffer;
          if(newh>=settings.maxHeight) {
            textarea.css("overflow","auto");
          } else {
            textarea.css("overflow","hidden");
          }
          textarea.css({"height":newh+"px"});
        }
      };
      textarea.keydown(resizeBox);
      textarea.keyup(resizeBox);
      resizeBox();
    });
  };
})(jQuery);

Again if you want to keep up with an updated version of this plugin check it out in My Javascript Git Repository.

If you enjoyed reading this post, check out this post jQuery Ghost Textbox plugin.

Tags: facebook, jquery, plugin 24 Aug 2009