AngularJS-101: Counting Characters and Set Maximum Length in TextArea

kleinelefant

5.00/5 (1 vote)

Apr 17, 2015

CPOL

2 min read

90145

100

This tutorial would show you how to count characters entered into Textarea, and set maximum characters allowed in Textarea

Download source - 645 B

Introduction

There are many ways to count characters entered in HTML textarea, and I find that AngularJS is one of the convenient ways to achieve it.

This tutorial is only meant for hands-on snippets and instructions. If you want to learn more about AngularJS, you could refer to https://angularjs.org/ and https://docs.angularjs.org/tutorial.

Background

AngularJS is a structural framework for dynamic web apps, and it provides many directives, like ng-model, ng-style.... to teach browsers new syntax through a construct, including: Data binding, as in {{}}.

In this tip, it would show you how AngularJS-Data biding works by counting characters entered in textarea dynamically.

Using the Code

First of all, the main HTML file should be created as follows:

<!DOCTYPE html>
<html >
<title> AngularJS-101 </title>
<head>
</head>
<body>
  <div>
    <p>You have entered X characters</p>
    
    <Textarea  name="fieldText"  rows=5 cols=50 >  </textarea>
  </div>
</body>
</html>

Then, AngularJS reference library should be added into HEADER:

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</head>

Now, one AngularJS controller would be created to handle textarea:

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script language="JavaScript">
       angular.module('AppController', []).controller('WordController', function(){
          var wordController = this;
          wordController.WordLength = 0;
          
          wordController.Text = "";
          
          wordController.WordLengthStyle={'color':'red'}; 
          
          wordController.UpdateWordLength = function( $event)
          {
            wordController.WordLength = wordController.Text.length;
          };
        });
    </script>
</head>

'WordController' is used to bind with Textarea attributes:

WordController.Text is to bind with Textarea.Text
WordController.WordLength is to bind with Textarea.TextLength
WordController.UpdateWordLength is to bind with Textarea.onChange

And in order to achieve those bindings, AngularJS directives, i.e., ng-app, ng-controller, ng-model, and ng-change, will be used.

In the HTML tag:

<html ng-app="AppController">

Then, one object should be initiated:

<div ng-controller="WordController as wordController">
    <p>You have entered X characters</p>
    
    <Textarea  name="fieldText"  rows=5 cols=50 >  </textarea>
  </div>

wordController is newly created as WordController, and its attribute is bound to Textarea:

<div ng-controller="WordController as wordController">
    <p ng-model="wordController.WordLength" >You have entered {{wordController.WordLength}} 
	characters</p>
    
    <Textarea  name="fieldText"  rows=5 cols=50 >  </textarea>
  </div>

The symbol {{}} would show the value of AngularJS variable onto HTML display.

The number of characters entered into Textarea is still not displayed because ng-model is not added to bind with Textarea.Text, and ng-change is not added to bind with Textarea.onChange event:

<div ng-controller="WordController as wordController">
    <p ng-model="wordController.WordLength" >You have entered {{wordController.WordLength}} 
	characters</p>
    
    <Textarea  name="fieldText" ng-model="wordController.Text"  
	ng-change="wordController.UpdateWordLength()" rows=5 cols=50 >  </textarea>
  </div>

It is able to count characters entered into Textarea dynamically. And to make the number striking, ng-style is simply added to bind with wordController.WordLengthStyle.

<p  ng-model="wordController.WordLength" >You have entered 
<font ng-style="wordController.WordLengthStyle">{{wordController.WordLength}} </font>characters</p>

Finally, the HTML will be as follows:

<!DOCTYPE html>
<html ng-app="AppController">
<title> AngularJS-101 </title>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script language="JavaScript">
       angular.module('AppController', []).controller('WordController', function(){
          var wordController = this;
          wordController.WordLength = 0;
          wordController.Text = "";
          wordController.WordLengthStyle={'color':'red'}; 

          wordController.UpdateWordLength = function( $event)
          {
            wordController.WordLength = wordController.Text.length;
          };
        });
    </script>
</head>
<body>
  <div ng-controller="WordController as wordController">
    <p ng-model="wordController.WordLength" >You have entered 
	<font ng-style="wordController.WordLengthStyle">{{wordController.WordLength}} </font> 
	characters</p>
    
    <Textarea  name="fieldText" ng-model="wordController.Text"  
	ng-change="wordController.UpdateWordLength()" ng-trim="false" 
	rows=5 cols=50 maxlength="100" >  </textarea>
  </div>
</body>
</html>

Note: ng-trim="false" will not automatically trim the input, and maxlength="10" will limit the number of characters entered into Textarea to 100 (adjustable).

It would look like this:

Points of Interest

Let's have fun with AngularJS. :)

History

17^th April, 2015: Initial version
28^th April, 2015: Change title and content into Counting characters in Textarea