利用Angular.js限制textarea輸入的字數
- 高洛峰原創
- 2016-12-09 15:46:241204瀏覽
前言
大家可能都遇到過在輸入的時候做出限制的需求，本文介紹的是透過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>
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn