angulaire.js - Comment limiter le nombre de mots saisis dans une zone de texte dans Angularjs?

Question

Généralement, la saisie peut être restreinte, mais sur le terminal mobile, vous pouvez continuer à saisir si la méthode de saisie dépasse la limite en tapant un grand paragraphe de texte puis en cliquant sur la zone de saisie de texte. Existe-t-il un autre moyen de suivre le nombre de mots saisis par l'utilisateur, et lorsque le nombre de mots saisis par l'utilisateur est dépassé, une invite apparaîtra et le contenu en excès sera supprimé ?

Answer 1

<p ng-controller="TextareaCtrl">
    <textarea ng-model="text" ng-change="checkText()"></textarea>
</p>

function TextareaCtrl($scope)
{
    $scope.checkText = function () {
        if ($scope.text.length > 5) {
            alert("text is too long");
            $scope.text = $scope.text.substr(0, 5);
        }
    };
}

Answer 2

Utilisez $watch

javascript$scope.content; //假设这是你textarea上的绑定
var limitation = 150; // 假设文本长度为 150
$scope.$watch('content', function(newVal, oldVal) {
    if (newVal && newVal != oldVal) {
        if (newVal.length >= limitation) {
            $scope.content = newVal.substr(0, limitation); // 这里截取有效的150个字符
        }
    }
})

Answer 3

Vous pouvez faire ceci :
Liez une variable ng-model="length" à la zone de texte pour compter votre nombre de mots actuel, puis liez une variable via ng-disabled="length>=140" pour désactiver la zone de texte, ou une boîte contextuelle ou quelque chose du genre , de toute façon, il s'agit de surveiller le nombre de mots de la boîte de sortie.

Answer 4

<p ng-controller="myNoteCtrl">

<textarea ng-model="message" cols="40" rows="10" maxlength="{{ max }}"></textarea>
<p>
    <button ng-click="save()">保存</button>
    <button ng-click="clear()">清除</button>
</p>
<p>Number of characters left: <span ng-bind="left()"></span></p>    

</p>

<script>

var app = angular.module("myNoteApp", []);
app.controller("myNoteCtrl", function($scope) {
    $scope.max = 100;
    $scope.message = "";
    $scope.left  = function() {
        return 100 - $scope.message.length;
    };
    $scope.clear = function() {$scope.message = "";};
    $scope.save  = function() {alert("Note Saved");};
});

</script>