Project Description
A jQuery plugin to Autosize a textarea whenever a key is released or text is pasted.


Change log

v 1.0.1
  • Removed the input event bind because with <= IE9 it doesn't detect backspace or delete. Also, it was causing double the work because it is fired whenever keyup is fired.
  • The previous paste event bind was useless because at the time of the event, the text hasn't changed. A 100ms delay has been added to ensure the text is there.
  • Added a cut event bind, because of the removal of the input event bind. This also has a 100ms delay.
v 1.0.2
  • Added onPasted callback

<!--Don't use the 'cols' attribute on the textarea, use a style or class to specify a width-->
<textarea id="textarea1" style="width:450px;"></textarea>
<textarea id="textarea2" style="width:450px;height:100px;"></textarea>

Initialize the textarea:

Specify a callback whenever the textarea re-sizes:
    $("#textarea1").autoSizeTextArea({ onResize: function() { console.log($(this).height(); }  });

Specify a minimum height
    $("#textarea2").autoSizeTextArea({ minHeight: 100 });

All properties can be set globally; specify that the textarea should be re-sized as soon as a key is released (the default delay is 100ms):
    $.fn.autoSizeTextArea.defaults.keyupDelay = null;

A textarea is re-sized whenever a key-up or paste event occurs. If text is programatically pasted into the textarea, you can update the size manually:
  $("#button1").click(function () {
      $("#textarea1").val("Lorem ipsum dolor...").autoSizeTextArea('update');

Specify a callback for after text has been pasted into the textarea:
    $("#textarea1").autoSizeTextArea({ onPasted: function() { console.log($(this).val(); }  });

Last edited Mar 28, 2015 at 11:56 AM by JayTeeAitch, version 4