I am trying detect when a textarea bees full for creating pagination effect. Using the .length property will not work, however, because long words 'jump' to new lines.

| I like to dooo|     displays as  | I like to     | 
| oooodle       |                  | dooooooodle   |

So what ends up happening is that the textarea always runs out of space before the .length property reaches the textarea limit. Is there any other way to detect textarea fullness? Jquery solutions are fine as well. Thanks.

I am trying detect when a textarea bees full for creating pagination effect. Using the .length property will not work, however, because long words 'jump' to new lines.

| I like to dooo|     displays as  | I like to     | 
| oooodle       |                  | dooooooodle   |

So what ends up happening is that the textarea always runs out of space before the .length property reaches the textarea limit. Is there any other way to detect textarea fullness? Jquery solutions are fine as well. Thanks.

• javascript
• jquery
• textarea

Share Improve this question Follow edited May 18, 2011 at 9:02 whamsicore asked May 18, 2011 at 8:52 whamsicorewhamsicore 8,72099 gold badges4242 silver badges5151 bronze badges 4

• What do you mean by full? What are you checking for – Ash Burlaczenko Commented May 18, 2011 at 8:55
• You want users to have a limited amount of text they can enter? If so you can count per keypress (-backspace). and check if current amount equals limit. – Wouter van Tilburg Commented May 18, 2011 at 8:59
• I want a trigger to take place once the textarea is full, so that I can create an artificial pagination effect (move user to a new textarea) – whamsicore Commented May 18, 2011 at 9:04
• 1 Most browsers now allow users to resize textarea elements, so users can make them any size they like. Is there a point to a script to wrap lines when the textarea width may change at any time? – RobG Commented May 18, 2011 at 9:22

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

You can try to check if scrollbars have appeared in your textarea. Here is a simple way to do this. Initially make the scrollbar one line shorter than the ultimate height you want to show, then on keypress check if scrollbars have appeared, then wait for the next space char to be entered. As soon as space char is entered do the following: 1. delete the space char, 2. increase the textarea height one line linger (so scrollbar disappears), 3. create a new textarea and move focus to the new textarea.

Update
Here is a demo. I changed my method a bit and this is the code:

Markup

<textarea class="paginate"></textarea>

JS

$('textarea.paginate').live('keydown', function() {

    // scrollbars apreared
    if (this.clientHeight < this.scrollHeight) {

        var words = $(this).val().split(' ');
        var last_word = words.pop();
        var reduced = words.join(' ');
        $(this).val(reduced);
        $(this).css('height', '65px');

        $(this).after('<textarea class="paginate"></textarea>');
        $(this).next().focus().val(last_word);

    }

});

CSS

.paginate { height: 60px; width: 200px; display: block;}

In runtime, you may listen to the key-press event of the textarea, pass the textarea.val() value into a hidden <pre id="mypre" style="display:none; "></pre>, then get mypre's width or even height $("#mypre").width(). It's your decision how you'll work with the "simulated" width/height.