Question

I’ve implemented a standard jQuery auto grow/expand textarea plugin into iPhone my web app. It’s working fine except for two issues (listed below). Firstly, allow me to stress that I’ve tried googled and experimented with different tutorial and come to the conclusion that this is the best one for my needs.

Issue 1. Delaying expansion of textarea onKeyUp. How? The function expand is called on keyup:

 $(this).keyup(update);

Since i’m using CSS3 animation (-webkit-transition) to animate the expansion and since the site/”app” is built for iPhones, i need to delay this action by say 500 ms so that typing wont lag because of that. I’ve tried different solutions like setTimeOut in different parts of the code, even Delay, etc but it does not work. period.

Issue 2: Padding on the textarea causes it to expand somewhat randomly and twice as much as it should.

 padding:10px 10px;

It is a known issue – I know, but so far it seems as if know one has yet figured out how to properly deal with it. Removing the padding makes everything work fine. Without suggesting me to use another plugin or simply to remove the padding, how can alter the code to make it work with padding?

JS Code handeling the expansion:

 (function($) {

/*
 * Auto-growing textareas; technique ripped from Facebook
 */
$.fn.autogrow = function(options) {

    this.filter('textarea').each(function() {

        var $this       = $(this),
            minHeight   = $this.height(),
            lineHeight  = $this.css('lineHeight');

        var shadow = $('<div></div>').css({
            position:   'absolute',
            top:        -10000,
            left:       -10000,
            width:      $(this).width(),
            fontSize:   $this.css('fontSize'),
            fontFamily: $this.css('fontFamily'),
            lineHeight: $this.css('lineHeight'),
            resize:     'none'
        }).appendTo(document.body);

        var update = function() {

            var val = this.value.replace(/</g, '&lt;')
                                .replace(/>/g, '&gt;')
                                .replace(/&/g, '&amp;')
                                .replace(/\n/g, '<br/>');

            shadow.html(val);

            $(this).css('height', Math.max(shadow.height() + 15, minHeight));
            $("#guestInfoNameLable").css('height', Math.max(shadow.height() + 15, minHeight));
        }

         var fix = function() {

            var val = this.value.replace(/</g, '&lt;')
                                .replace(/>/g, '&gt;')
                                .replace(/&/g, '&amp;')
                                .replace(/\n/g, '<br/>');

            shadow.html(val);
            $(this).css('height', minHeight);
            $("#guestInfoNameLable").css('height', minHeight);
        }

        $(this).keyup(update);
        $(this).change(fix);
        //$(this).change(update).keyup(update).keydown(update);

        update.apply(this);

    });

    return this;

}

})(jQuery);

HTML form:

 <div class="guestInfoLabel" id="guestInfoNameLable">guest</div>
 <textarea id="guestInfoName" autocomplete="off" autocorrect="off"></textarea>

Answer 1

I ended up writing my own “plugin” – in 10 lines! *Here’s for everyone searching for a simple, lightweight plugin that works with element padding and most input types. It may not be flawless but it sure works.

How it works:
OnKeyUp, function getInputStr is called which sets a time out and calls the function handling the expantion: expandElement. This function counts the number of \n, line breaks that is, and expands/contracts the textarea with 20 px for each line break. If the textarea contains more than 8 line breaks, it stops expanding (maxHeight.) I’ve added CSS3 animation on the textArea to make the expansion run more smoothly, but that is of course entirely optional. Here’s code for that:

  -webkit-transition: height 0.6s;
  -webkit-transition-timing-function: height 0.6s;

Part 1: the textarea (HTML)

  <textarea id="guestInfoName" autocomplete="off" autocorrect="off" onKeyUp="getInputStr(this.value)" onBlur="resetElHeight()" onFocus="expandElement(this.value)"></textarea>

Part 2 (optional): Set time out – to avoid textarea to expand while still typing. (Javascript)

//global variables
var timerActivated = false;
var timeOutVariable = "";

function getInputStr(typedStr) {

//call auto expand on delay (350 ms)

if(timerActivated){
    clearTimeout(timeOutVariable);
    //call textarea expand function only if input contains line break
    if((typedStr.indexOf("\n") != -1)) {
        timeOutVariable=setTimeout(function() { expandTxtArea(typedStr); },350);
    }
}
else {
    if((typedStr.indexOf("\n") != -1)) {
        timeOutVariable=setTimeout(function() { expandTxtArea(typedStr); },350);
        timerActivated = true;
    }
}
//auto grow txtArea 
}

Part 3: Expand text area (Javascript)

function expandTxtArea(typedStr) {
var nrOfBrs = (typedStr.split("\n").length - 1);
var txtArea = $("#guestInfoName");
var label = $("#guestInfoNameLable");
var newHeight = (20 * (nrOfBrs+1));

//console.log("nr of line breaks: " + nrOfBrs); console.log("new height: " + newHeight);

//setting maxheight to 8 BRs
if(nrOfBrs < 9) {
    txtArea.css("height", newHeight); 
    label.css("height",newHeight);
} else {
    txtArea.css("height", 180); 
    label.css("height",180);
}

}

That’s it folks. Hope this helps someone with a similar problem!