JSFiddle - React, Tailwind, and code Playground

by zerolfc

JavaScript

(function($) {
$.fn.extend({
    jqEasyCounter: function(id,max) {
        return this.each(function() {
            var $this = $(this), maxChars = max, valid = 0;

			if(maxChars <= 0) return;
            
            doCount();

			$this
				.bind('keydown keyup keypress', doCount)
				.bind('focus paste', function(){ setTimeout(doCount, 10); });
			
			function doCount(){
				var val = $this.val(),
					length = val.length
				
				if(length >= maxChars) {
					val = val.substring(0, maxChars); 				
				};
				
				if(length > maxChars){
					// keep scroll bar position
					var originalScrollTopPosition = $this.scrollTop();
					$this.val(val.substring(0, maxChars));
					$this.scrollTop(originalScrollTopPosition);
				};

                $('#'+id).html('Characters: ' + $this.val().length + ' / '  + maxChars);
                    
			};
        });
    }
});

})(jQuery);

//$('#message').jqEasyCounter();