Word and Character Counter Using jQuery

Word and Character Counter Using jQuery

How to create word counter or character counter Using jQuery

Word and Character Counter Using jQuery

Import Library

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/js/bootstrap.min.js"></script>
<script src="jquery.word-and-character-counter.js"></script>

Use Script

 $("#wordcount").counter({
    	count: 'up',
    	type: 'word',
  text: false,
  msg: 'Word',
  containerClass: 'wrapper'
});

Design Style

.wrapper {
    font-size: 12px;
    border: 1px solid green;
    border-radius: 50px;
    width: 120px;
    padding: 10px;
    margin-top:10px;
    font-weight:bolder;
}

Make Content

<p><br/></p>
<div class="container">
    	<textarea class="form-control" id="wordcount" rows="15"></textarea>
</div>

 

Tags: ,