Question

当达到最大字符数时，如何阻止用户在textarea中键入更多字符？

我现在正在使用ng-keypress但我无法弄清楚如何在达到限制时阻止输入。用户不应该在该textarea中输入或粘贴超过1000个字符。

问题是关于如何停止输入，而不是如何计算输入长度，这部分对我来说已经很好了。

    $scope.$watch('comment.Comment.body', function (newValue, oldValue) {
        if (newValue) {
            $scope.commentLength = 1000 - newValue.length;
        }
    });
    // Tried this, nothing stops it
    $scope.updateBody = function (event) {
        event.cancel();
        event.stop();
        return false;
    };

HTML

<textarea
    ng-model="comment.Comment.body"
    name="comment[Comment][body]"
    placeholder="Your comment..."
    ng-keypress="updateBody($event)">
</textarea>
<p>
    {{commentLength}} remaining
</p>

解决方案：

我的错误是我在某处发生了错字，但给定的答案并非100％正常。 oldValue需要substring()，而不是newValue。如果不这样做，则无法将超过1000个字符的文本粘贴到文本区域中。使用newValue可以将文本粘贴并剪切到限制。

    $scope.$watch('comment.Comment.body', function (newValue) {
        if (newValue && newValue.length > 1000) {
            $scope.comment.Comment.body = newValue.substring(0, 1000);
        }
        // Must be checked against undefined or you get problems when removing text
        if (newValue != undefined) {
            $scope.commentLength = 1000 - newValue.length;
        }
    });

Answer 1

您应该尝试使用maxlength属性。代码类似于

<textarea
    ng-model="comment.Comment.body"
    name="comment[Comment][body]"
    placeholder="Your comment..."
    maxlength="1000">
</textarea>
<p>
    {{1000 - comment.Comment.body.length}} remaining
</p>

Answer 2

您可以使用＆＃39; ng-maxlength＆＃39;从角度输入功能，并在值无效时观察。 https://docs.angularjs.org/api/ng/directive/input，但它不会阻止输入的可能性。

您也可以设置值表：

$scope.$watch('value', function(newVal, oldVal) {
  if(newVal.length > 10) {       
    $scope.value = oldVal;
  }
});

Answer 3

指令方式：

app.directive('myBlock', function ($parse) {
    return {
        scope: {
          validLength: '='
        },
        link: function (scope, elm, attrs) {

          elm.bind('keypress', function(e){

            // stop typing if length is equal or greater then limit
            if(elm[0].value.length >= scope.validLength){
              e.preventDefault();
              return false;
            }
          });
        }
    }   
});

plunker

中的演示

Answer 4

这里的所有答案都过于复杂，无法利用HTML5的强大功能。您需要做的就是在输入元素中添加maxlength="1000"，这将阻止用户输入超过1000个字符。它还会剪切任何粘贴的输入以保持限制。有关详细信息，请参阅Docs。

请注意，maxlength与ng-maxlength不同。 ng-maxlength只检查输入的长度，如果输入超出限制，则设置formName.$invalid。您可以在同一输入或textarea元素上使用它们。

Answer 5

<input type="text" name="usrname" maxlength="10">

在HTML中使用maxlength。这很简单有效

Answer 6

只需将maxlength属性添加到textarea即可解决问题

<textarea maxlength="10"
    ng-model="comment.Comment.body"
    name="comment[Comment][body]"
    placeholder="Your comment..."
    ng-keypress="updateBody();">
</textarea>

Answer 7

尽管观察者确实有效，但由于摘要周期的性质，它们非常昂贵，因此如果您在许多地方需要此功能，您可以访问更改事件并监控长度。

// controller
$scope.monitorLength = function (maxLength) {
  if ($scope.value.length > maxLength) {
    $scope.value = $scope.value.substring(0, maxLength);
  }
}

// html
<textarea ng-model="value" ng-change="monitorLength(1000)"></textarea>

Answer 8

这适用于我的模板。

<textarea
    ng-model="comment.Comment.body"
    name="comment[Comment][body]"
    placeholder="Your comment..."
    maxlength="1000">
</textarea>
<p>
    {{1000 - (comment.Comment.body.length || 1000)}} remaining
</p>

Answer 9

你可以这样做来阻止它

    $scope.$watch('value', function(newVal, oldVal) {
        if(newVal == undefined){
            $scope.value= oldVal;
        }
    });

    <textarea ng-maxlength="10" ng-model="value" ></textarea>

Answer 10

经历同样的问题，偶然发现了这篇文章。以下解决方案对我有用。

<input type="text" data-ng-model="value" class="form-control" ng-pattern="/^(\(?\+?[0-9]*\)?)?[0-9_\- \(\)]$/" ng-maxlength="15" maxlength="15" placeholder="enter your text here...">

Answer 11

为什么角？当简单的HTML＆amp; JavaScript可以做到这一点吗？

   $scope.charLimit = function($event, limitNum) {
       limitField =$event.currentTarget;
       if (limitField.value.length > limitNum) {
           limitField.value = limitField.value.substring(0, limitNum);}
   };

在HTML中

 <textarea onkeyup="charLimit($event,10)" placeholder="Enter text here..."></textarea>

当达到字符限制时，AngularJS会阻止textarea上的输入

11 个答案: