title: Autoresize textarea remove rows on backspace
body: <p>I have the following code for autoresizing a textarea:  </p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;textarea class="autoresize" id="txt" rows="2"&gt;&lt;/textarea&gt;
  </code></pre>
  
  <p><strong>JS:</strong></p>
  
  <pre><code>$('#txt').keydown(function(e) {
    var $this = $(this),
        rows = parseInt($this.attr('rows'));
  
    // on enter, add a row
    if (e.which === 13)
      $this.attr('rows', rows + 1);
  
    // on backspace, remove a row -- THIS IS THE PROBLEM
    if (e.which === 8 &amp;&amp; rows !== 2) 
      $this.attr('rows', rows - 1);
  });
  </code></pre>
  
  <p>It works well, but when I hit backspace to erase a letter from a word, it also removes rows, and that's my problem.<br>
  I want it to shrink back when the user "deletes" empty rows but I don't know how to achieve it.  </p>
  
  <p>If you want, you can check it out in <a href="http://jsfiddle.net/tw41qknn/" rel="nofollow">this fiddle</a>.</p>