Question

我一直在尝试使用AngularJS限制文本区域中的单词。到目前为止，我已经尝试了这个

Textarea HTML

<textarea ng-model="man_abs" style="height: 100px;" id="manuscriptabstract" name="manuscriptabstract" placeholder="Maximum 250 Words" class="form-control" ng-change="wordCount()" required=""></textarea>
<span class="help-block">{{251 - man_abs.split(' ').length}} words left</span>

AngularJS脚本

$scope.wordCount = function() {
    if ($scope.man_abs != undefined) {
        var key_length = $scope.man_abs.split(' ').length;
        if (key_length >= 251) {
           $scope.man_abs = $scope.man_abs.substring(0, $scope.man_abs.lastIndexOf(" "));
           alert("You are allowed to enter only 250 words in this field");
        }
    }
}

我似乎工作得很好，但是当我复制粘贴250字以上的段落时，它没有按预期工作。

我已经尝试过preventDefault（）方法但它无法正常工作。我需要确保用户不能输入超过250个单词，如果复制粘贴，则在第250个单词之后必须删除该句子。

Answer 1

您有两种选择：

ng-click = wordCount()
使用角度观察$watch查看更改。

但我建议你选择ng-click选项。因为它很容易并且不会在页面上产生负载/压力，因为$ watch不允许页面休息。

示例：

<textarea ng-model="man_abs" style="height: 100px;" id="manuscriptabstract" name="manuscriptabstract" placeholder="Maximum 250 Words" class="form-control" ng-change="wordCount()" ng-click="wordCount()" required=""></textarea>

在控制器中

$scope.wordCount = function() { if ($scope.man_abs != undefined) { var key_length = $scope.man_abs.split(' ').length; if (key_length >= 251) { var trimmedString = $scope.man_abs.substring(0, 250); $scope.man_abs = trimmedString; alert("You are allowed to enter only 250 words in this field"); } } }

Answer 2

您可以创建自定义验证器

.directive('maxwords', [function () {
  return {
    require : 'ngModel',
    link : function (scope, elm, attrs, ctrl) {
      ctrl.$validators.maxwords = function (modelValue, viewValue) {
        if (ctrl.$isEmpty(modelValue)) {
          // consider empty models to be valid
          return true;
        }

        return (modelValue.match(/\S+/g) || []).length <= +attrs.maxwords;

      };
    }
  };
}])

并将其用作：

  <textarea maxwords="30"/>

error.maxwords将像通常的验证一样设置验证。

Answer 3

你应该在Paste事件上调用你的函数，如

<textarea ng-model="man_abs" style="height: 100px;" id="manuscriptabstract" name="manuscriptabstract" placeholder="Maximum 250 Words" class="form-control" ng-change="wordCount()" ng-paste="wordCount()" required=""></textarea>
<span class="help-block">{{251 - man_abs.split(' ').length}} words left</span>

Answer 4

您可以使用$ watch来完成此任务试试这段代码：

https://jsfiddle.net/jigarb1992/awLp4bnk/

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    <div ng-app="myapp" ng-controller="myctrl">
    <textarea ng-model="txt" rows="10" cols="50"></textarea>
    <br>
    <span class="help-block">{{limit}} words left</span>
    </div>

<script>
var app = angular.module("myapp", []);
app.controller("myctrl", function($scope){
    $scope.limit = 250;
    $scope.$watch("txt", function(newValue, lastValue){
     var words = $scope.txt.split(" ").length - 1;
    if(words > 250 ){
        $scope.txt = lastValue;
    }
    $scope.limit = 250 - words;
  })
})
</script>

Answer 5

您可以使用Array的Split和join方法。

以下情况适用于您的情况

 $scope.wordCount = function() {
        if ( $scope.man_abs != undefined ) {
          var key = $scope.man_abs.split( ' ' );
            if ( key.length >= 251 ) {
            $scope.man_abs = key.splice( 0, 250 ).join( ' ' );
           alert( "You are allowed to enter only 250 words in this field" );
               }
                }
            }

Answer 6

您还可以尝试使用如下指令限制单词：

.directive('myCheck', function () {
        return {
            restrict: 'AE',
            link: function (scope, element, attrs) {
                element.bind('keyup', function (e) {
                  console.log(this.value);
                  var words = this.value.split(" ");
                  console.log("words are:",words.length)
                  var tmp = '';
                  if (words.length >5){
                    for(var i=0;i<5;i++){
                      tmp += words[i] + ' ';
                    }
                    this.value = tmp;
                  } 
                });
            }
        }
});

到HTML：

<input type="text" my-check> /*you can do it with textarea as well*/

plunker示例：

https://plnkr.co/edit/7EeUbu1d96vCCQhi8g19?p=preview

使用AngularJS限制textarea中的单词

Textarea HTML

AngularJS脚本

6 个答案:

到HTML：

plunker示例：