angularjs textarea 剩余字数统计

最新推荐文章于 2022-12-13 13:43:42 发布

abgo98357

最新推荐文章于 2022-12-13 13:43:42 发布

阅读量334

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/ryt103114/p/6377917.html

版权

写页面的过程中用到了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;
　　　　};
　　});

效果图：

转载于:https://www.cnblogs.com/ryt103114/p/6377917.html

abgo98357

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angularjs textarea 剩余字数统计

写页面的过程中用到了textarea的文本域，就突然想起他也可以加上剩余字数统计的这个功能。第一个思路：根据键盘按键按下去触发一个方法计数： <textarea cols="50" rows="10" maxlength="100" title="只能输入100个字" ng-model="text" ng-change="tolCount()"></text...
复制链接

扫一扫