當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

angularjs textarea 剩余字数统计

發(fā)布時間：2023/12/16 编程问答 37 豆豆

生活随笔收集整理的這篇文章主要介紹了 angularjs textarea 剩余字数统计小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

寫頁面的過程中用到了textarea的文本域，就突然想起他也可以加上剩余字數(shù)統(tǒng)計的這個功能。

第一個思路：

根據(jù)鍵盤按鍵按下去觸發(fā)一個方法計數(shù)：

<textarea cols="50" rows="10" maxlength="100" title="只能輸入100個字" ng-model="text" ng-change="tolCount()"></textarea>
<p>還可輸入{{count}}個字</p>

效果圖：

注意：這個是不需要用到j(luò)s的，所說可以統(tǒng)計，但是存在很大的弊端，只要鍵盤按下，就計數(shù)了，比如說你按了刪除鍵，他也計數(shù)了；并且，如果你是復制粘貼在textarea上的，并沒有計數(shù)。

第二個思路：根據(jù)輸入的內(nèi)容長度計算剩余的字數(shù)：

html部分：

<!DOCTYPE html>
<html ng-app="App">
<head >
　　<title>文本域字數(shù)限制</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;
　　　　};
　　});

效果圖：

轉(zhuǎn)載于:https://www.cnblogs.com/ryt103114/p/6377917.html

總結(jié)

以上是生活随笔為你收集整理的angularjs textarea 剩余字数统计的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。