I want to show an alert message if the user type more than 1000 characters or copy past more than 1000 characters. For that, I am using following JS code but somehow it's not working.

HTML code:

<div class="form-group">
    <label for="">Werk-Beschreibung</label>
    <textarea id="limit" maxlength="1000" name="werk_beschreibung" maxlength="1000" cols="30" rows="10" class="form-control"><?php echo escape($werk_beschreibung); ?></textarea><span class="counter"></span>
</div>

JS code:

$("#limit").on('input', function() {
    if($(this).val().length >=1001) {
        alert('you have reached a limit of 1000');       
    }
});

What am I doing wrong here?

I want to show an alert message if the user type more than 1000 characters or copy past more than 1000 characters. For that, I am using following JS code but somehow it's not working.

HTML code:

<div class="form-group">
    <label for="">Werk-Beschreibung</label>
    <textarea id="limit" maxlength="1000" name="werk_beschreibung" maxlength="1000" cols="30" rows="10" class="form-control"><?php echo escape($werk_beschreibung); ?></textarea><span class="counter"></span>
</div>

JS code:

$("#limit").on('input', function() {
    if($(this).val().length >=1001) {
        alert('you have reached a limit of 1000');       
    }
});

What am I doing wrong here?

• javascript
• jquery
• html

• What you exactly mean by but somehow it's not working.? – Zakaria Acharki Commented Jan 15, 2018 at 15:54
• 5 Your alert will never trigger because your max length is set which means it will never reach 1001 characters. You should put a little disclaimer for the text field to tell users max length is 1000 or just alert at 1000 characters – Huangism Commented Jan 15, 2018 at 15:55
• You've set twice the maxlength property – Javier Gonzalez Commented Jan 15, 2018 at 16:03
• The "JS code" is a mix of JavaScript and jQuery, so consider adding a jQuery tag to your question. – JohnH Commented Jan 15, 2018 at 16:07

4 Answers 4

Here's a code from How can I bind to the change event of a textarea in jQuery?

$('#textareaID').bind('input propertychange', function() {
    if (this.value.length > 1000) {
        $("#textareaID").val($("#textareaID").val().substring(0,1000));
        alert("stop");
    }
});

Here's the working fiddle with 1000 character limit.

Fiddle: https://jsfiddle/ofpn88mc/3/

Take a look at this snippet, you are listening at the wrong event.

; (function ($) {
    $.fn.characterCounter = function (limit) {
        return this.filter("textarea, input:text").each(function () {
            var $this = $(this),
            checkCharacters = function (event) {

                if ($this.val().length > limit) {
                    // Trim the string as paste would allow you to make it 
                    // more than the limit.
                    $this.val($this.val().substring(0, limit))
                    // Cancel the original event
                    event.preventDefault();
                    event.stopPropagation();
                }
            };

            $this.keyup(function (event) {
                // Keys "enumeration"
                var keys = {
                    BACKSPACE: 8,
                    TAB: 9,
                    LEFT: 37,
                    UP: 38,
                    RIGHT: 39,
                    DOWN: 40
                };

                // which normalizes keycode and charcode.
                switch (event.which) {
                    case keys.UP:
                    case keys.DOWN:
                    case keys.LEFT:
                    case keys.RIGHT:
                    case keys.TAB:
                        break;
                    default:
                        checkCharacters(event);
                        break;
                }
            });

            // Handle cut/paste.
            $this.bind("paste cut", function (event) {
                // Delay so that paste value is captured.
                setTimeout(function () { checkCharacters(event); event = null; }, 150);
            });
        });
    };
}(jQuery));

$(document).ready(function () {
    $("textarea").characterCounter(100);
});

textarea
{
    height:300px;
    width:350px;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea>

</textarea>

Your code is almost valid, no need for big changes, you need just to make sure the maxlength is the same in your condition and all goes right.

NOTE : Remove the duplicated maxlength="1000" in your textarea field.

$("#limit").on('input', function() {
  if ($(this).val().length >= 10) {
    alert('you have reached a limit of 10');
  }
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="form-group">
  <label for="">Werk-Beschreibung</label>
  <textarea id="limit" maxlength="10" name="werk_beschreibung" cols="30" rows="10" class="form-control"></textarea><span class="counter"></span>
</div>

The following will display a notice when the character limit is reached, plus will remove the notice once the character count is under the limit:

<textarea class="limit" maxlength="100"></textarea>

$(".limit").on("input", function () {
    if ($(this).val().length >= 100) {
        $("#noticeArea").html("<font color='red'>Character limit reached.</font>");
    }
    if ($(this).val().length < 100) {
        $("#noticeArea").html("");
    }
});

As others have noted, the textarea's maxlength and $(this).val().length must match.