关于javascript：AngularJS会在达到字符数限制时阻止在textarea上输入


AngularJS prevent input on textarea when character limit is reached

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

我现在正在使用ng-keypress，但是当达到限制时我无法弄清楚如何阻止输入。 用户在该文本区域中总共不能输入或粘贴超过1000个字符。

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

柱塞链接。

1
2
3
4
5
6
7
8
9
10
11
    $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

1
2
3
4
5
6
7
8
9
10
11
<textarea
    ng-model="comment.Comment.body"
    name="comment[Comment][body]"
    placeholder="Your comment..."
    ng-keypress="updateBody($event)">
</textarea>
<p><center>[wp_ad_camp_2]</center></p><p>

    {{commentLength}} remaining

</p>

解：

我的错误是我只是在某处打错了字，但给出的答案并非100％正确。 代替使用oldValue，需要substring() newValue。 如果不这样做，则不能将超过1000个字符的文本粘贴到文本区域中。 使用newValue可以将文本粘贴并剪切到"限制"。

1
2
3
4
5
6
7
8
9
    $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;
        }
    });
相关讨论

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

1
2
3
4
5
6
7
8
9
10
11
<textarea
    ng-model="comment.Comment.body"
    name="comment[Comment][body]"
    placeholder="Your comment..."
    maxlength="1000">
</textarea>
<p>

    {{1000 - comment.Comment.body.length}} remaining

</p>
相关讨论

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

您也可以只看值：

1
2
3
4
5
$scope.$watch('value', function(newVal, oldVal) {
  if(newVal.length > 10) {      
    $scope.value = oldVal;
  }
});
相关讨论

指令方式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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中的演示

相关讨论

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

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

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

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

遇到同样的问题，偶然发现了这个帖子。下面的解决方案为我工作。

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

尽管观察者确实可以工作，但是由于摘要周期的性质，它们的成本很高，因此，如果您在许多地方都需要此功能，则可以访问更改事件并监视长度。

1
2
3
4
5
6
7
8
9
// 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>
相关讨论

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

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

您可以这样做来阻止它

1
2
3
4
5
6
7
    $scope.$watch('value', function(newVal, oldVal) {
        if(newVal == undefined){
            $scope.value= oldVal;
        }
    });

    <textarea ng-maxlength="10" ng-model="value"></textarea>
相关讨论

这在模板中对我有用。

1
2
3
4
5
6
7
8
9
10
11
<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>

为什么有角度？简单的HTML和JavaScript何时可以做到这一点？

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

在HTML中

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

相关讨论