利用Angular.js限制textarea输入的字数
程序员文章站
2022-06-07 19:01:26
前言
大家可能都遇到过在输入的时候做出限制的需求，本文介绍的是通过angular.js限制textarea输入字数的方法，有需要的朋友们可以参考以下实例。
实例代码如下...
前言
大家可能都遇到过在输入的时候做出限制的需求，本文介绍的是通过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>
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。