jQuery update character counter after pasting in more characters than maxlength

Question

I have a form that with a textarea and I'm trying to prevent users from pasting more than 1000 characters into it. I have a div that displays the number of characters left as the user types, which is the problem. I have the pasting part working, but I'm also trying to set the character counter at the same time.

Here's the code:

<textarea name="Note" id="Note" cols="80" rows="5" class="text-input shadow form-control" maxlength="1000"></textarea> <div id="NoteLength"></div> <div>characters remaining.</div>

and the jQuery:

$("#NoteLength").text("1000"); //user is typing $("#Note").keyup(function () { el = $(this); if (el.val().length >= 1000) { el.val(el.val().substr(0, 1000)); } else { $("#NoteLength").text(1000 - el.val().length); } }); //user is pasting $("#Note").blur(function (event) { var maxLength = 1000; var length = this.value.length; if (length > maxLength) { $("#NoteLength").text("0"); this.value = this.value.substring(0, maxLength); } });

It's truncating the text as expected, but it's not resetting the NoteLength div to if I paste a large chunk of text, say 1500 characters. If I paste blocks of 200 characters, the counter works fine. Works if I backspace over the last character pasted in too, just not when I go way over in one paste which is unfortunately the most likely user scenario.

Possible duplicate of limit how many characters can be pasted in textarea — mccambridge
– mccambridge, Commented Jun 27, 2018 at 16:51
Well, of course it's not updating the note length. That's in your else clause of your keyup event handler... — Taplar
– Taplar, Commented Jun 27, 2018 at 16:53
Yes, virtually everything has been discussed before. The example you posted is popping an alert, not displaying a counter, and as that's the part I'm stuck on maybe we can pull back on the immediate 'duplicate' charge that's become so popular. If you don't have anything regarding the counter, please move on. — TrevorGoodchild
– TrevorGoodchild, Commented Jun 27, 2018 at 16:54
Taplar, that part is working actually, that's for when users are typing. — TrevorGoodchild
– TrevorGoodchild, Commented Jun 27, 2018 at 16:54

Taplar · Accepted Answer · 2018-06-27 17:01:33Z

2

You can use the input event to capture any change to the value of the input by a user

$("#NoteLength").text("1000"); //user is changing the input value, typing or pasting, all of it $("#Note").on('input', function () { if (this.value.length > 1000) { this.value = this.value.substr(0, 1000); } $("#NoteLength").text(1000 - this.value.length); });

answered Jun 27, 2018 at 17:01

Taplar

25k4 gold badges24 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

TrevorGoodchild Over a year ago

Yup, that nailed it. Thank you Taplar!

Taplar Over a year ago

@TrevorGoodchild I am curious though. I see in your markup you have maxlength set on the input element. How is the user able to exceed that? The browser should be stopping them.

TrevorGoodchild Over a year ago

The browser is stopping them but I didn't catch that until later. I'm paring back the code to just handle the counter.

Collectives™ on Stack Overflow

jQuery update character counter after pasting in more characters than maxlength

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related