前言
大家可能都遇到過在輸入的時候做出限制的需求,本文介紹的是通過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>總結
以上就是這篇文章的全部內容了,希望本文的內容對大家的學習或者工作能帶來一定的幫助,如果有疑問大家可以留言交流。
新聞熱點
疑難解答