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

kleinelefant

Rate me:

4.00/5 (2 votes)

28 Apr 2015CPOL2 min read

89.1K

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:

HTML

<!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:

HTML

<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:

HTML

<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

<html ng-app="AppController">

Then, one object should be initiated:

HTML

<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:

HTML

<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:

HTML

<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.

HTML

<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:

HTML

<!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

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Written By

kleinelefant

Software Developer

Singapore

My hobbies are to learn programming languages, including human languages, and to play sports, including E-sports.
My current expertises:
- Programming languages: C/C++/C#, Java, JavaScript, Ruby
- OS: Windows/Windows Server, Unix, Linux, Android
- Web framework: AngularJS, WCF, ASP.NET, Node.JS, Java Servlet
Note: Travelling is to enrich my life, so I travel very often

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

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

Introduction

Background

Using the Code

Points of Interest

History

License

Comments and Discussions