AngularJS实现的输入框字数限制提醒功能示例

更新时间：2017年10月26日 09:41:32 作者：fly18702787810

这篇文章主要介绍了AngularJS实现的输入框字数限制提醒功能,涉及AngularJS事件监听与元素属性动态操作相关实现技巧,需要的朋友可以参考下

本文实例讲述了AngularJS实现的输入框字数限制提醒功能。分享给大家供大家参考，具体如下：

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>www.jb51.net AngularJS字数提示</title>
</head>
<style>
  *{
    margin:0;
    padding:0;
  }
  input,button,textarea,select{
    outline:none;
  }
  textarea{
    resize:none;
  }
  .content{
    width:350px;
    height:150px;
    font-size:18px;
    text-indent:40px;
    overflow-y: hidden;
    overflow-x: hidden;
  }
  .content:hover{
    border:1px solid #00ffff;
    cursor:pointer;
  }
  .top{
    vertical-align:top;
  }
  .fontColor
  {
    color:#eee;
  }
  .tableT td{
    margin-right:20px;
  }
</style>
<body ng-app="myApp" ng-controller="myControl">
<table class="tableT">
  <tr>
    <td class="top">退货说明&nbsp:</td>
    <td><textarea id="sayId" class="content" ng-model="say" ng-keyup="changeText()"></textarea></td>
  </tr>
  <tr>
    <td></td>
    <td class="fontColor">你还可以输入{{textLength}}字</td>
  </tr>
</table>
</body>
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="../js/angular.min.js"></script>
<script type="text/javascript">
  var app = angular.module('myApp',[]);
  app.controller('myControl',function($scope){
    $scope.textLength = 10;
    $scope.changeText = function(){
      var length = $("#sayId").val().length;  //使用$scope.say.length的时候，输入空格的时候没有计算空格长度。
      console.log(length);
      $scope.textLength = 10 - length;
      if($scope.textLength<=0){
        $scope.textLength = 0;
        $("#sayId").val($scope.say.slice(0,10));
      }
    }
  });
</script>
</html>

运行效果：

PS：这里再为大家推荐2款功能相似的在线工具供大家参考：

在线字数统计工具：
http://tools.jb51.net/code/zishutongji

在线字符统计与编辑工具：
http://tools.jb51.net/code/char_tongji

更多关于AngularJS相关内容感兴趣的读者可查看本站专题：《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》

希望本文所述对大家AngularJS程序设计有所帮助。

您可能感兴趣的文章:

AngularJS表单验证中级篇（3）
这篇文章主要为大家详细介绍了AngularJS表单验证,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-09-09
详解Angular中通过$location获取地址栏的参数
这篇文章主要介绍了详解 Angular中通过$location获取地址栏的参数，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-08-08
利用AngularJs实现京东首页轮播图效果
这篇文章给大家介绍了如何利用AngularJs实现京东首页轮播图的效果，本文通过示例代码详细介绍了实现过程，对大家学习AngularJS具有一定参考借鉴价值，有需要的朋友们可以参考借鉴。
2016-09-09
详解Angular之路由基础
单页应用中，组件时构建应用的基础元素，页面展示什么内容均是靠页面有什么组件决定的，而展示什么组件又是由一组路由（带有Url元素的特定集合，可用于导航视图）决定的，希望本文可以帮助读者了解路由的基础概念和基础使用、写法。
2021-05-05
Angular.js实现动态加载组件详解
这篇文章主要给大家介绍了关于Angular.js实现动态加载组件的相关资料，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
2017-05-05
在Angular中实现一个级联效果的下拉框的示例代码
这篇文章主要介绍了在Angular中实现一个级联效果的下拉框的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-05-05
AngularJS Toaster使用详解
AngularJS Toaster是一个 AngularJS 提示框.基于angular v1.2.6 及以上和angular-animate.这篇文章主要介绍了AngularJS Toaster使用详解,需要的朋友可以参考下
2017-02-02
浅谈angularJs函数的使用方法(大小写转换,拷贝,扩充对象)
今天小编就为大家分享一篇浅谈angularJs函数的使用方法(大小写转换,拷贝,扩充对象)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-10-10
详解AngularJS中$http缓存以及处理多个$http请求的方法
$http 是 AngularJS 中的一个核心服务，用于读取远程服务器的数据，通过本文给大家介绍AngularJS中$http缓存以及处理多个$http请求的方法，希望的朋友一起学习吧
2016-02-02
AngularJS表单编辑提交功能实例
这篇文章主要介绍了AngularJS表单编辑提交功能实例,本文讲解如何修改表单的默认值,需要的朋友可以参考下
2015-02-02