Question

I have created a jQuery elastic plugin. I have the problem that if I write a word, such as “jQuery”, on the first line, and I press enter, the “jQuery” word will be hidden for a few milliseconds and then a new line will be inserted into the textarea.

My plugin page- http://jsfiddle.net/yash_wow/7F8aK/3/

Please help me solve this.

P.S. – I don’t want to use any other plugin and I don’t want code which inserts an extra line at the bottom of the textarea as all other elastic plugins do!

Answer 1

I did manage to tweak your plugin to work in Chrome here (untested on other browsers). Essentially I had to handle Enter in a special way to avoid it adding the new line to the bottom of the textbox and scrolling down to view it automatically before you get a chance to grow the textbox.

I also had to add the .keyup() so that backspace worked as well.

Here is the full javascript:

/*
Author - Yash Mathur
*/
jQuery.fn.autoGrow = function() {
    return this.each(function() {
        var colsDefault = this.cols;
        var rowsDefault = this.rows;

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

        var growByRef = function(obj, enterPressed) {
            var linesCount = 0;
            var lines = obj.value.split('\n');

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

            if (enterPressed) linesCount++;

            if (linesCount > rowsDefault) obj.rows = linesCount;
            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;
        }

        $(this).keypress(function(evt) {
            if (evt.which == 13) {
                growByRef(this, true);
                this.value += '\n';
                return false;
            } else {
                growByRef(this, false);
            }
        });
        $(this).keyup(function(evt) {
           if (evt.which == 13)
              return false;
           growByRef(this, false); 
        });
        this.style.overflow = "hidden";
        //this.onkeyup = grow;
        this.onfocus = grow;
        this.onblur = grow;
        growByRef(this);
    });
};
$("textarea").autoGrow();