Textarea Autogrow plugin. How to improve?
<p>I found this code online and modified it to suite my needs. It's a textarea that expands and shrinks based on character input and once user presses Enter, it inserts a comment.</p>

<p>I would like to know if there's any way to improve it, make it more elegant and such. If this was written using the latest version of JQuery, what would be added or removed?</p>

<p>Thank you.</p>

<p><strong>Code</strong></p>

<pre><code>jQuery.fn.autoGrow = function(){



    return this.each(function(){
        // Variables
        var colsDefault = this.cols;
        var rowsDefault = this.rows;



        //Functions

        var grow = function() {
            growByRef(this);
        }



        var onFocus = function(obj) {

      if ($(this).val() != 'Write a comment...') {
        return;
      } else {
        $(this).parents(".comment_new_container").children("img").show();
        //$(this).height(34);
        $(this).width(742);
        $(this).val(''); 
      }

        }

        var onBlur = function(obj) {

      if ($(this).val().length == 0) { 
        $(this).parents(".comment_new_container").children("img").hide();
        //$(this).height(16);
        $(this).width(792);
        $(this).val('Write a comment...');
      } 

        }


        var growByRef = function(obj) {

        var new_comment = '';

      if (!obj.shiftKey &amp;&amp; obj.keyCode == 13) {

        obj.preventDefault();

        new_comment += '&lt;div class="comment_container" id="001"&gt;';
        new_comment += '&lt;a href="#"&gt;&lt;i class="comment_delete"&gt;&amp;nbsp;&lt;/i&gt;&lt;/a&gt;';
        new_comment += '&lt;img src="img/avatar45.png" /&gt;';
        new_comment += '&lt;a href="/"&gt;Mickey Mouse&lt;/a&gt;';
        new_comment += '&lt;br/&gt;';
        new_comment += '&lt;div class="comment_content"&gt;' + $(this).val().replace(/\n/g, '&lt;br /&gt;'); + '&lt;/div&gt; &lt;!-- End comment_content --&gt;';
        new_comment += '&lt;div class="comment_timestamp"&gt;13 minutes ago&lt;/div&gt; &lt;!-- End comment_timestamp --&gt;';
        new_comment += '&lt;/div&gt; &lt;!-- End comment_container --&gt;';

        $(new_comment).insertBefore($(this).parents(".comment_new_container"));

            var comment_total = parseInt($(this).parents('.entry_container').find('.meta.comment_total').text(), 10) + 1;
          $(this).parents('.entry_container').find('.meta.comment_total').text(comment_total);


        $(this).val('Write a comment...');
        $(this).blur();
        growByRef(this);



      } else {

        var linesCount = 0;
        var lines = obj.value.split('\n');

        for (var i=lines.length-1; i&gt;=0; --i)
        {
          linesCount += Math.floor((lines[i].length / colsDefault) + 1);
        }

        if (linesCount &gt;= rowsDefault) {
          obj.rows = linesCount + 1;
        } else {
          obj.rows = rowsDefault;           
        }

            }

    }

        var characterWidth = function (obj){
            var characterWidth = 0;
            var temp1 = 0;
            var temp2 = 0;
            var tempCols = obj.cols;

            obj.cols = 1;
            temp1 = obj.offsetWidth;
            obj.cols = 2;
            temp2 = obj.offsetWidth;
            characterWidth = temp2 - temp1;
            obj.cols = tempCols;

            return characterWidth;
        }

        // Manipulations

        $(this).css("width","auto");
        $(this).css("height","auto");
        $(this).css("overflow","hidden");

        this.style.width = ((characterWidth(this) * this.cols) + 6) + "px";

        $(this).bind("focus", onFocus);
        $(this).bind("blur", onBlur);
        $(this).bind("keypress", growByRef);
        $(this).bind("keyup", grow);

    });
};
</code></pre>
