4

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!

5
  • I can't see the problem. Which browser are you using?
    – rmorero
    Nov 2, 2011 at 11:06
  • im using google chrome v 15.0.874.106 Nov 2, 2011 at 11:07
  • ok its working fine in firefox but why isn't it working in google chrome? Nov 2, 2011 at 11:09
  • I haven't got Chrome here at the moment, so can't test it, but I'd expect it has something to do with the rendering engine (redrawing elements when adding rows). Perhaps changing the css instead of rowcount of the textarea could help? But then you'd have to calculate the height you want instead...
    – rmorero
    Nov 2, 2011 at 11:15
  • thnx for the help :) I'll try that out Nov 2, 2011 at 11:18

2 Answers 2

3

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();
0
0
/*
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) {
            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 (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.style.overflow = "hidden";
        this.onkeydown = grow;
        this.onfocus = grow;
        this.onblur = grow;
        this.keypress = grow;
        growByRef(this);
    });
};
$("textarea").autoGrow();

Don't You Think KeyPress and Keydown is much better.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.