Textarea - Limit words Counter

Textarea - Limit words Counter with jQuery

by Adi Jaya

HTML

<div class="field-container">
    <textarea rows="5" id="demo"></textarea>
</div>

<p id="status">5 words left</p>

CSS

#demo {
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    resize: vertical;
}

JavaScript

var wordLen = 5;
var len;

$( "#demo" ).on( "keyup", function(event) {
	

	len = $( "#demo" ).val().split(/[\s]+/);
    
	if (len.length > wordLen) { 
		if ( event.keyCode == 46 || event.keyCode == 8 ) {
        	
    	} else {
    		event.preventDefault();
            $(this).val( $.trim( $(this).val() ) );
		}
	}

	wordsLeft = (wordLen) - len.length;
    
	if( wordsLeft > 0 ) {
    	$( "#status" ).html(wordsLeft+ ' words left').css("color","green");
    } else {
    	$( "#status" ).html( "Maximum words" ).css("color","red");
    }
    
});

$( "#demo" ).on( "input", function(event) {
	var val = $( this ).val();
    	val = val.replace(/\s+/g," ");
    $(this).val( val  );
    
});