How to show alert message if html textarea length is larger then specified?

Question

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?

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, Jan 15 '18 at 15:55
The "JS code" is a mix of JavaScript and jQuery, so consider adding a jQuery tag to your question. — JohnH, Jan 15 '18 at 16:07

score 3 · Accepted Answer · 2018-01-15T16:12:42.637

3

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.net/ofpn88mc/3/

edited Jan 15 '18 at 16:12

answered Jan 15 '18 at 16:00

this also allows users to type more than 1000 in the text field – Huangism Jan 15 '18 at 16:01
Add that to the code block before so it gives a complete example – Huangism Jan 15 '18 at 16:10
@TanmayGawankar, can you tell me one more answer? I have entered large text. Using PHP mb_strlen it' showing 1039 and using the JS it's alert me 1000 characters notice, Can you tell me why? – Shibbir Jan 15 '18 at 16:28

score 0 · Answer 2 · edited Jan 15 '18 at 16:17

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.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea>

</textarea>

@ShibbirAhmed look at the other answer which only has a few lines of code — Huangism, Jan 15 '18 at 16:09

score 0 · Answer 3 · answered Jan 15 '18 at 16:21

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.com/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>

score 0 · Answer 4 · answered Jun 03 '22 at 06:01

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.

How to show alert message if html textarea length is larger then specified?

4 Answers4