利用Angular.js限制textarea输入的字数
前言
大家可能都遇到过在输入的时候做出限制的需求,本文介绍的是通过Angular.js限制textarea输入字数的方法,有需要的朋友们可以参考以下实例。
实例代码如下
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8"/>
<title>AngularJS简单应用程序--输入字数限制</title>
<!--
@author:sm
@email:sm0210@qq.com
@desc:AngularJS简单应用程序--输入字数限制
-->
</head>
<!--
AngularJS应用程序
您已经学习了足够多关于AngularJS的知识,现在可以开始创建您的第一个AngularJS应用程序:
-->
<body>
<divng-app="myTodoApp"ng-controller="myTodoCtrl">
<h2>我的笔记</h2>
<p><textareang-model="message"cols="40"rows="10"ng-readonly="ngreadonly"></textarea></p>
<p>
<buttonng-click="save()">保存</button>
<buttonng-click="clear()">清除</button>
</p>
<p>剩下字符数:<spanng-bind="left()"></span></p>
</div>
<!--引入angular-->
<scriptsrc="js/angular.min.js"></script>
<scriptlanguage="javascript">
varapp=angular.module("myTodoApp",[]);
app.controller("myTodoCtrl",function($scope){
$scope.message="";
$scope.ngreadonly=false;
$scope.left=function(){
if($scope.message.length>100){
$scope.ngreadonly=true;
return0;
}
return100-$scope.message.length;
}
$scope.clear=function(){$scope.message="";$scope.ngreadonly=false;}
$scope.save=function(){$scope.message=""}
});
</script>
</body>
</html>
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。