angularjs text area character counter

Question

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

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

    </div>

You should post your controller code, so that people can see what's going on behind the scene. — tamakisquare, Dec 16 '13 at 03:51
There's nothing in the controller. What is happpening is the span tag is showing the words left by 1500-createprofilefields.length — user1424508, Dec 16 '13 at 03:56
@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 — charlietfl, Dec 16 '13 at 04:09

Banana-In-Black · Accepted Answer · 2014-08-07T03:02:07.523

82

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/

edited Aug 07 '14 at 03:02

answered Dec 16 '13 at 03:54

Banana-In-Black

2,558
1
27
33

3

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) – Fisk Feb 06 '14 at 09:16
Not working on Mac (any browser). I have tested at same time on win - working like a charm :( – Avael Kross Feb 27 '14 at 16:05
@AvaelKross you may not have used the reference to the model. Please post code so we can assist. – Dallas Clark Apr 28 '14 at 02:29
Doesn't work with line break? Copied random text from somewhere. Stops while some characters are left. – Manoj Suthar Nov 29 '16 at 11:28

Imanou Petit · Answer 2 · 2016-04-19T10:45:44.410

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

score 2 · Answer 3 · answered Mar 25 '17 at 11:20

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>

score 0 · Answer 4 · answered Aug 02 '16 at 07:48

you can use a function with call ng-change=""

       <div class="controls">

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

        <br />

    <!--counter-->
      <span class="form-help">{{1500-chrLength}}         
       Characters</span>

        </div>

and in controller.js

$scope.countLength = function(val){
  $scope.chrLength = val;
}

angularjs text area character counter

4 Answers4

Linked