angularjs text area character counter

angularjs angularjs-directive angularjs-ng-repeat angular-ui

59,143

Solution 1

It's because angularJS automatically trimmed your model.

If you're using angularJS 1.1.1 or newer, add ng-trim="false" to textarea.

Working example: http://jsfiddle.net/9DbYY/

Solution 2

With Angular, textarea has an optional argument called ngTrim. According to the Angular textarea page:

If set to false Angular will not automatically trim the input. (default: true)

Usage:

<textarea
  ng-model="string"
  [ng-trim="boolean"]>
...
</textarea>

The following code shows how to use ngTrim in order to prevent Angular to trim the input:

<!DOCTYPE html>
<html lang="en" ng-app="">

<head>
    <meta charset="UTF-8">
    <title>Character count</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
</head>

<body>
    <textarea ng-trim="false" ng-model="countmodel"></textarea>
    <p>{{15 - countmodel.length}} left</p>
</body>

</html>

Note that input[text] has the same optional ngTrim argument (Angular input page).

Solution 3

Create a directive named charCount

.directive('charCount', ['$log', '$timeout', function($log, $timeout){
    return {
        restrict: 'A',
        compile: function compile()
        {
            return {
                post: function postLink(scope, iElement, iAttrs)
                {
                    iElement.bind('keydown', function()
                    {
                        scope.$apply(function()
                        {
                            scope.numberOfCharacters = iElement.val().length;
                        });
                    });
                    iElement.bind('paste', function()
                    {
                        $timeout(function ()
                        {
                            scope.$apply(function()
                            {
                                scope.numberOfCharacters = iElement.val().length;
                            });
                        }, 200);
                    });
                }
            }
        }
    }
}])

In your HTML call the directive char-count and access variable numberOfCharacters

<textarea
        ng-model="text"
        ng-required="true"
        char-count></textarea>
Number of Characters: {{ numberOfCharacters }}<br>

59,143

user1424508

Updated on July 09, 2022

Comments

user1424508 almost 2 years
Hi I have a characeter counter for a text area. My problem is that it doesn't count spaces or linebreaks. How do I make it so that it does so?
```
   <div class="controls">

   <textarea rows="4" cols="50"  maxlength="1500" data-ng-minLength="1" data-ng  
    model="createprofilefields.description" required highlight-on-
    error></textarea>

    <br />


  <span class="form-help">{{1500-createprofilefields.description.length}}         
   Characters</span>

    </div>
```
- tamakisquare over 10 years
  
  You should post your controller code, so that people can see what's going on behind the scene.
- user1424508 over 10 years
  
  There's nothing in the controller. What is happpening is the span tag is showing the words left by 1500-createprofilefields.length
- charlietfl over 10 years
  
  @tamakisquare no need for controller code... ng-model automatically creates the scope property. Nothing to see in this instance regarding controller. It's all done in digests
Fisk over 10 years

Hove to solve problem with "symbol counter" like in your example, if textarea has validation directives like ng-minlength="5" (invalid model is always empty)
Avael Kross over 10 years

Not working on Mac (any browser). I have tested at same time on win - working like a charm :(
Dallas Clark about 10 years

@AvaelKross you may not have used the reference to the model. Please post code so we can assist.
Manoj Suthar over 7 years

Doesn't work with line break? Copied random text from somewhere. Stops while some characters are left.