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>

 

Line Number Textarea Using jQuery

Line-Number-Textarea-Using-jQuery2

How to create line number on textarea using jquery

Line-Number-Textarea-Using-jQuery2

Import Library

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="jquery-linedtextarea.js"></script>
<link href="jquery-linedtextarea.css" type="text/css" rel="stylesheet" />

Use Script

$(function() {
  // Target all classed with ".lined"
  $(".lined").linedtextarea(
    {selectedLine: 1}
  );
  // Target a single one
  	$("#mytextarea").linedtextarea();
});

Make Content

<textarea class="lined" rows="20" cols="60">
your text on textarea
</textarea>