angularjs textarea 剩余字数统计
Posted 任小小
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了angularjs textarea 剩余字数统计相关的知识，希望对你有一定的参考价值。
写页面的过程中用到了textarea的文本域，就突然想起他也可以加上剩余字数统计的这个功能。
第一个思路：
根据键盘按键按下去触发一个方法计数：
<textarea cols="50" rows="10" maxlength="100" title="只能输入100个字" ng-model="text" ng-change="tolCount()"></textarea>
<p>还可输入{{count}}个字</p>
效果图：
注意：这个是不需要用到js的，所说可以统计，但是存在很大的弊端，只要键盘按下，就计数了，比如说你按了删除键，他也计数了；并且，如果你是复制粘贴在textarea上的，并没有计数。
第二个思路：根据输入的内容长度计算剩余的字数：
html部分：
<!DOCTYPE html>
<html ng-app="App">
<head >
<title>文本域字数限制</title>
</head>
<body ng-controller="testCtrl">
<textarea cols="50" rows="10" maxlength="100" title="只能输入100个字" ng-model="text" ng-change="tolCount()"></textarea>
<p>还可输入{{count}}个字</p>
</body>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="test.js"></script>
</html>
js部分：
var app = angular.module(\'App\', []);
app.controller(\'testCtrl\', function($scope) {
$scope.count = 100;
$scope.tolCount = function () {
console.log($scope.text.length);
$scope.count = 100 - $scope.text.length;
};
});
效果图：
以上是关于angularjs textarea 剩余字数统计的主要内容，如果未能解决你的问题，请参考以下文章
JavaScript 实现textarea限制输入字数， 输入框字数实时统计更新，输入框实时字数计算移动端bug解决