Count/Limit characters in a textbox using Javascript

Posted on July 15, 2013October 26, 2015 By David Kittell

<html>
<head>
    <script  type="text/javascript" src="/js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="/js/jquery.limit2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $("#text").limita({
	limit: 100,
	id_result: "counter",
	alertClass: "alert"
});
	});
</script>
</head>
<body>
    <form  id="input_form"  method="POST" action="?">
    <textarea id="text" rows="4" cols="49"></textarea>
    <input type="submit"  value="submit">
</form>
<div  id="counter"></div>
</body>
</html>

(function($){
 $.fn.limita = function(options) {

 	var defaults = {
		limit: 200,
		id_result: false,
		alertClass: false
	}

 	var options = $.extend(defaults, options);

    return this.each(function() {

	var	characters = options.limit;

	if(options.id_result != false)
	{
		$("#"+options.id_result).append("You have <strong>"+ characters+"</strong> characters");
	}

	$(this).keyup(function(){
		if($(this).val().length > characters){
		$(this).val($(this).val().substr(0, characters));
		}

		if(options.id_result != false)
		{

			var remaining = characters - $(this).val().length;
			$("#"+options.id_result).html("You have <strong>"+remaining+"</strong> characters");

			if(remaining <= 10)
			{
				$("#"+options.id_result).addClass(options.alertClass);
			}
			else
			{
				$("#"+options.id_result).removeClass(options.alertClass);
			}
		}
	});

});
 };
})(jQuery);

Originally Posted on July 15, 2013
Last Updated on October 26, 2015

All information on this site is shared with the intention to help. Before any source code or program is ran on a production (non-development) system it is suggested you test it and fully understand what it is doing not just what it appears it is doing. I accept no responsibility for any damage you may do with this code.

Related

Code JavaScript