Question

嗨我有一个文本区域的字符数。我的问题是它不计算空格或换行符。我该怎么做才能这样做？

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

Answer 1

这是因为angularJS会自动修剪你的模型。

如果您使用的是angularJS 1.1.1或更高版本，请将ng-trim="false"添加到textarea。

工作示例：http://jsfiddle.net/9DbYY/

Answer 2

使用Angular，HttpConfiguration config = GlobalConfiguration.Configuration ?? new HttpConfiguration(); config.EnableCors(); //the next two lines I had to change - instead of 'config' pass in the HttpServer appBuilder.UseWebApi(GlobalConfiguration.DefaultServer); appBuilder.UseNinjectWebApi(GlobalConfiguration.DefaultServer);有一个名为textarea的可选参数。根据{{3}}：

如果设置为false，Angular将不会自动修剪输入。（默认值：true）

用法：

ngTrim

以下代码显示了如何使用<textarea ng-model="string" [ng-trim="boolean"]> ... </textarea>来阻止Angular修剪输入：

ngTrim

请注意，<!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>具有相同的可选input[text]参数（Angular textarea page）。

Answer 3

创建名为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);
                    });
                }
            }
        }
    }
}])

在HTML中调用指令char-count和访问变量numberOfCharacters

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

Answer 4

你可以使用一个功能，呼叫 ng-change =＆＃34;＆＃34;

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

并在controller.js中

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

angularjs文本区域字符计数器

4 个答案: