javascript - 当达到字符限制时，AngularJS 阻止在文本区域上输入

Question

当达到最大字符数时，如何阻止用户在文本区域中输入更多字符？

我现在正在使用 ng-keypress，但我不知道如何在达到限制时阻止输入。用户在该文本区域中输入或粘贴的字符总数不应超过 1000 个。

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

Plunker link.

    $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% OK。不是使用 oldValue，而是需要 substring() newValue。如果不这样做，则无法将超过 1000 个字符的文本粘贴到文本区域中。使用 newValue 可以将文本粘贴和剪切到 Limit。

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