zoukankan      html  css  js  c++  java
  • 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;
        };
      });

    效果图:

  • 相关阅读:
    SVN访问配置及常用操作
    SVN配置
    在Eclipse中创建maven项目
    Maven的基础之环境配置
    线程池理解
    JVM之类的生命周期
    JAVA代码编程规范
    Jquery实现div局部页面刷新中js渲染失效问题解决
    觅踪17
    第十四周进度
  • 原文地址:https://www.cnblogs.com/ryt103114/p/6377917.html
Copyright © 2011-2022 走看看