码迷,mamicode.com
首页 > Web开发 > 详细

angularjs textarea 剩余字数统计

时间:2017-02-08 14:44:45      阅读:200      评论:0      收藏:0      [点我收藏+]

标签:logs   jquer   ges   功能   mod   复制   count()   body   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 剩余字数统计

标签:logs   jquer   ges   功能   mod   复制   count()   body   textarea   

原文地址:http://www.cnblogs.com/ryt103114/p/6377917.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!