angularjs textarea 剩余字数统计
寫(xiě)頁(yè)面的過(guò)程中用到了textarea的文本域，就突然想起他也可以加上剩余字?jǐn)?shù)統(tǒng)計(jì)的這個(gè)功能。
第一個(gè)思路：
根據(jù)鍵盤(pán)按鍵按下去觸發(fā)一個(gè)方法計(jì)數(shù)：
<textarea cols="50" rows="10" maxlength="100" title="只能輸入100個(gè)字" ng-model="text" ng-change="tolCount()"></textarea>
<p>還可輸入{{count}}個(gè)字</p>
效果圖：
?
注意：這個(gè)是不需要用到j(luò)s的，所說(shuō)可以統(tǒng)計(jì)，但是存在很大的弊端，只要鍵盤(pán)按下，就計(jì)數(shù)了，比如說(shuō)你按了刪除鍵，他也計(jì)數(shù)了；并且，如果你是復(fù)制粘貼在textarea上的，并沒(méi)有計(jì)數(shù)。
第二個(gè)思路：根據(jù)輸入的內(nèi)容長(zhǎng)度計(jì)算剩余的字?jǐn)?shù)：
html部分：
<!DOCTYPE html>
<html ng-app="App">
<head >
<title>文本域字?jǐn)?shù)限制</title>
</head>
<body ng-controller="testCtrl">
<textarea cols="50" rows="10" maxlength="100" title="只能輸入100個(gè)字" ng-model="text" ng-change="tolCount()"></textarea>
<p>還可輸入{{count}}個(gè)字</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;
};
});
效果圖：
?
轉(zhuǎn)載于:https://www.cnblogs.com/ryt103114/p/6377917.html
總結(jié)
以上是生活随笔為你收集整理的angularjs textarea 剩余字数统计的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： MT4 DDE数据交换
- 下一篇： 网络存储专有名词介绍