Javascript: detect textarea to be full

Question

I am trying detect when a textarea becomes 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.

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, May 18 '11 at 08: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, May 18 '11 at 09:04
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, May 18 '11 at 09:22

score 3 · Accepted Answer · edited May 23 '17 at 10:28

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;}

edited May 23 '17 at 10:28

Community

1
1

answered May 18 '11 at 09:12

Majid Fouladpour

29,356
21
76
127

Is there anyway to not have the scroll bar show up at all? Thanks! – whamsicore May 19 '11 at 02:55
1

Humm ..., that would bring back the hidden element (textarea) approach. Basically, you add each character to the hidden textarea first and bound scrollbar detection to that textarea. When scrollbars appear in that textarea, you fire pagination. But whether it is worth it or not, is another question. – Majid Fouladpour May 19 '11 at 08:37
the hidden height scenario is only half way functional, as divs and textareas seem to display render text differently. However, I may end up using an approach combining hidden element and scrollbar detection:) – whamsicore Jun 08 '11 at 04:48
This method doesn't work if you use the copy & paste method with some text from other contents... – Vito Gentile Oct 22 '13 at 10:48
1

@VitoShadow, if you use `$('textarea.paginate').on('paste keydown', ...)` then it should work. – Majid Fouladpour Dec 10 '13 at 11:39

score 2 · Answer 2 · answered May 18 '11 at 09:03

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.

Javascript: detect textarea to be full

2 Answers2

Linked