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

Install
https://www.nuget.org/packages/jquery.autoSizeTextArea.js

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
Usage

HTML:
<!--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:
<script>
    $("#textarea1").autoSizeTextArea();
</script>


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


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


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):
<script>
    $.fn.autoSizeTextArea.defaults.keyupDelay = null;
</script>


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:
<script>
  $("#button1").click(function () {
      $("#textarea1").val("Lorem ipsum dolor...").autoSizeTextArea('update');
  });
</script>


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

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