How to prevent user to enter text in textarea after reaching max character limit

Question

I want to prevent user to enter text in textarea once it reaches a max character limit. What was happening that when i reached to max limit then my text-area scroll-bar move

Answer 1

Keep it simple

var max = 50;
$("#textarea").keyup(function(e){
$("#count").text("Characters left: " + (max - $(this).val().length));
});

and add this in your html

<textarea id="textarea" maxlength="50"></textarea>
<div id="count"></div>

view example

Answer 2

You could use this plugin instead of trying to write your own. I've found that it works pretty well.

Answer 3

You can keep your event as they are , and just use this library

Examples

// applying a click event to one element

Touche(document.querySelector('#myButton')).on('click', handleClick);

// or to multiple at once

Touche(document.querySelectorAll('.myButtons')).on('click', handleClicks);

// or with jQuery

$('.myButtons').on('click', handleClicks);