前言
大家可能都遇到過在輸入的時候做出限制的需求，本文介紹的是通過Angular.js限制textarea輸入字數的方法，有需要的朋友們可以參考以下執行個體。
執行個體代碼如下
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>AngularJS 簡單應用程式--輸入字數限制</title><!-- @author:sm @email:sm0210@qq.com @desc:AngularJS 簡單應用程式--輸入字數限制--></head><!-- AngularJS 應用程式 您已經學習了足夠多關於 AngularJS 的知識，現在可以開始建立您的第一個 AngularJS 應用程式：--><body ><div ng-app="myTodoApp" ng-controller="myTodoCtrl"> <h2>我的筆記</h2> <p><textarea ng-model="message" cols="40" rows="10" ng-readonly="ngreadonly" ></textarea></p> <p> <button ng-click="save()">儲存</button> <button ng-click="clear()">清除</button> </p> <p>剩下字元數：<span ng-bind="left()"></span></p></div><!--引入angular--><script src="js/angular.min.js"></script><script language="javascript"> var app=angular.module("myTodoApp",[]); app.controller("myTodoCtrl",function($scope){ $scope.message=""; $scope.ngreadonly = false; $scope.left = function(){ if($scope.message.length>100){ $scope.ngreadonly = true; return 0; } return 100-$scope.message.length; } $scope.clear = function(){$scope.message="";$scope.ngreadonly = false;} $scope.save = function(){$scope.message=""} });</script></body></html>
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的協助，如果有疑問大家可以留言交流。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
