Textarea auto resizer resize at every keypress on chrome

Question

I'm implementing an auto textarea resizer that auto-expands a textarea when user presses ENTER and after a minimum scrollHeight size.

It works well in IE, Firefox and Opera, but not in Chrome.
In Chrome the textarea is resized at any keypress (not only ENTER) because when settings e.style.height it also changes scrollHeight (this doesn't happen to occur on other browsers.

I marked the problematic line with a comment:

function resize(e)
{
    e = e.target || e;
    var $e = $(e);

    console.log( 'scrollHeight:'+e.scrollHeight );
    console.log( 'style.height:'+e.style.height );

    var h = Math.min( e.scrollHeight, $e.data('textexp-max') );
    h = Math.max( h, $e.data('textexp-min') );

    if( $e.data('h')!=h )
    {
        e.style.height = "";
        e.style.height      =  h + "px"; //this changes the scrollHeight even if style.height is smaller thatn scrollHeight
        //e.style.overflow  = (e.scrollHeight > h ? "auto" : "hidden");
        $e.data('h',h);
    }
    return true;
}

Here you'll find full code: http://jsfiddle.net/NzTYd/9/

UPDATE
I've found that when I update the e.style.height in Firefox/IE/Opera, e.scrollHeight is updated to the exact same value:
Example: Setting 80px to e.style.height, sets to 80px e.scrollHeight

However, Chrome updates e.scrollHeight with a higher value (4px more).
Example:: Settings 80px to e.style.height, sets to 84px e.scrollHeight

This causes a textarea that is growing 4px for EVERY keypress it receives!

score 0 · Answer 1 · edited May 23 '17 at 12:20

0

You can get the answer to this here.

Textarea to resize based on content length

edited May 23 '17 at 12:20

Community

1
1

answered Dec 01 '11 at 13:02

Sonal Khunt

1,876
12
20

That link shows different approaches to implement a textarea expander, but none is similar to mine. – Pherrymason Dec 01 '11 at 13:28
I updated my question to a better description of the main problem – Pherrymason Dec 01 '11 at 13:42

score 0 · Answer 2 · answered Dec 01 '11 at 13:56

Ok, I've found there is a bug with webkit: http://code.google.com/p/chromium/issues/detail?id=34224

Finally I solve it detecting if e.scrollHeight changed an amount of only 4 px, which is the difference chrome is adding.
If that condition is arised, I substract 4px from e.style.height to fix it.

score 0 · Answer 3 · answered Dec 01 '11 at 13:57

I built an auto-expanding textarea in jQuery a few months back and haved used it with great success on many sites. This doesn't address your issue directly, but you might find it helpful.

If the user provides a @@ a paragraph is inserted and extra line breaks are removed.

I have my textarea set to fit 40 characters per line. The line increments 1px at a time to accommodate the new characters.

You can see a working example on my site at evikjames.com > jQuery examples > Expandable Textarea.

$(".Expandable").live("keyup", function() {
    // ADJUST ROWS ROWS
    var ThisText = $(this).val();
    var Rows = calculateRows(ThisText);
    $(this).attr("rows", Rows);

    // CALCULTE COUNTER
    var ThisTextMax = $(this).attr("max");
    if (ThisText.length > ThisTextMax) {
        ThisText = ThisText.substring(ThisText, ThisTextMax);
        $(this).val(ThisText);
        alert("You have exceeded the maximum allowable text. Revise!");
    }
    $(this).next(".Count").html(ThisText.length + "/" + ThisTextMax + " characters.");
});

var calculateRows = function calculateRows(String) {
var NumCharacters = String.length;
var NumRows = Math.ceil(NumCharacters/40);
var Match = String.match(/@@/g);
var NumParagraphs = 0;
if (Match != null) {
     NumParagraphs = String.match(/@@/g).length;
     NumRows = NumRows + NumParagraphs;
}
return NumRows;

}

I'll take a look at your implementation. Thanks ;) – Pherrymason Dec 01 '11 at 14:03 — Pherrymason, Dec 01 '11 at 14:03

Textarea auto resizer resize at every keypress on chrome

3 Answers3