$('textarea').keypress(function (e) { // check if user pressed 'Enter' if(e.which == 13) { // get control object to modify further var control = e.target; // get existing 'Height' of pressed control var controlHeight = $(control).height(); //add some height to existing height of control, I chose 17 as my line-height was 17 for the control $(control).height(controlHeight+17); } }); $('textarea').blur(function (e) { // Here we get exact number of lines in our TextArea var textLines = $(this).val().trim().split(/\r*\n/).length; // Now apply the number Of Lines * line-height to your control. That's all. $(this).val($(this).val().trim()).height(textLines*17); });
<textarea></textarea>