达到字符限制时，AngularJS会阻止在textarea上输入答案

【问题标题】：AngularJS prevent input on textarea when character limit is reached达到字符限制时，AngularJS会阻止在textarea上输入
【发布时间】：2014-11-24 12:40:14
【问题描述】：

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

我现在正在使用 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 可以将文本粘贴和剪切到限制。

    $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;
        }
    });

【问题讨论】：

使用 ng-keydown（而不是 ng-keypress）有帮助吗？
如果你还需要这个问题的答案，请在这个线程中查看答案，你必须编写一个自定义指令 -> stackoverflow.com/questions/17075969/…

标签： javascript angularjs

【解决方案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>

【讨论】：

这不会阻止用户在输入框中输入超过 1000 个字符。
@Falk 我的坏。这是某人的评论，我不知道为什么它被删除了。我已经根据它编辑了我的答案。
我犯了一个错误 - maxlength 现在也适用于文本区域，所以这是一个正确的答案

【解决方案2】：

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

你也可以设置一个值守：

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

【讨论】：

我已经这样做了。问题是如何阻止输入。
您想完全禁用输入字段吗？因为第二个会阻止输入数据的可能性。
我试过了，对我没用。我现在有一个约会，大约 2 小时后我会安排一个 plunker。
这是 Plunker 链接plnkr.co/edit/40xoDECCnIB650bj8N0E 我想阻止用户添加超过 1000 个字符，但不将该字段设置为禁用。只是不允许他输入更多字符，但仍然允许他删除和更改内容。
工作，我在某处打错了：/ 谢谢！

【解决方案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

中的演示

【讨论】：

当我：1) 输入123456 2) 想通过选择6 更改为例如7 时的情况如何？

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

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

在你的 HTML 中使用 maxlength。这是简单有效的

【讨论】：

【解决方案6】：

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

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

【讨论】：

【解决方案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>

【讨论】：

我认为这是仅限制长度时的最佳选择。我使用 watch 策略将正则表达式应用于输入并在失败时用最后一个有效输入替换内容，但对于这种情况，我喜欢非 watch 选项。

【解决方案8】：

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

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

【讨论】：

【解决方案9】：

这在模板中对我有用。

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

【讨论】：

【解决方案10】：

你可以这样做来阻止它

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

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

【讨论】：

这行得通。由于它设置了 ng-maxlength，如果值大于 10，newVal 将是未定义的，您可以将其设置回 oldVal。

【解决方案11】：

为什么是角？什么时候简单的 HTML 和 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>

【讨论】：

创建一个指令以使其更可重用