0

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.

Avinash
  • 1,245
  • 11
  • 19
TrevorGoodchild
  • 978
  • 2
  • 23
  • 49
  • Possible duplicate of [limit how many characters can be pasted in textarea](https://stackoverflow.com/questions/2190420/limit-how-many-characters-can-be-pasted-in-textarea) – mccambridge Jun 27 '18 at 16:51
  • This has definitely been discussed before... – mccambridge Jun 27 '18 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 Jun 27 '18 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 Jun 27 '18 at 16:54
  • Taplar, that part is working actually, that's for when users are typing. – TrevorGoodchild Jun 27 '18 at 16:54
  • Right, but you are saying if they exceed the maxlength it is not updating. That's because the else is not being hit, which is the only place in the keyup that you are updating the note length. If you move that part outside of the else, and remove the else entirely, it should update the note length if you exceed the length or not – Taplar Jun 27 '18 at 16:55
  • I'm trying to update it after the (length > maxlength) check. – TrevorGoodchild Jun 27 '18 at 16:56
  • Which happens on blur, which fires once the element loses focus. An element being pasted into would still have focus – Taplar Jun 27 '18 at 16:56
  • Right, blur. When I click off of it it does update. I might need to try another event. – TrevorGoodchild Jun 27 '18 at 16:57
  • Also `length > maxLength` does not account for if the values are equal – Taplar Jun 27 '18 at 16:57
  • Nice catch, but I'm more worried about people going way over than actually a thousand. – TrevorGoodchild Jun 27 '18 at 16:58

1 Answers1

1

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);
});
Taplar
  • 24,788
  • 4
  • 22
  • 35