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.TextWordController.WordLength is to bind with Textarea.TextLengthWordController.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
- 17th April, 2015: Initial version
- 28th April, 2015: Change title and content into Counting characters in Textarea
