angular.js - Bagaimana untuk mengehadkan bilangan perkataan input textarea dalam Angularjs?

Question

Secara amnya, input boleh dihadkan, tetapi pada terminal mudah alih, anda boleh terus memasukkan jika kaedah input melebihi had dengan menaip perenggan besar teks dan kemudian mengklik pada kotak teks input. Adakah terdapat cara lain untuk menjejaki bilangan perkataan yang dimasukkan oleh pengguna, dan apabila bilangan perkataan yang dimasukkan oleh pengguna melebihi, gesaan akan muncul dan kandungan yang berlebihan akan dipadamkan?

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

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

Anda boleh melakukan ini:
Ikat pembolehubah ng-model="length" ke textarea untuk mengira jumlah perkataan semasa anda, dan kemudian ikat pembolehubah melalui ng-disabled="length>=140" untuk menjadikan textarea dilumpuhkan, atau kotak pop timbul atau sesuatu , bagaimanapun Ia adalah untuk memantau bilangan perkataan kotak output.

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>

<skrip>

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

</skrip>