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


Posted in Javascript onOctober 26, 2017

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

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>3water.com 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">退货说明 :</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>

运行效果:

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

Javascript 相关文章推荐
基于KMP算法JavaScript的实现方法分析
May 03 Javascript
js操作table元素实现表格行列新增、删除技巧总结
Nov 18 Javascript
jQuery移动web开发之页面跳转和加载外部页面的实现
Dec 04 Javascript
浅谈Angularjs link和compile的使用区别
Oct 21 Javascript
AngulerJS学习之按需动态加载文件
Feb 13 Javascript
js控制一个按钮是否可点击(可使用)disabled的实例
Feb 14 Javascript
js+SVG实现动态时钟效果
Jul 14 Javascript
在element-ui的el-tree组件中用render函数生成el-button的实例代码
Nov 05 Javascript
微信jssdk逻辑在vue中的运用详解
Nov 14 Javascript
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
Jun 18 jQuery
Vue列表如何实现滚动到指定位置样式改变效果
May 09 Javascript
vue3中provide && inject的使用
Jul 01 Vue.js
JS处理数据四舍五入(tofixed与round的区别详解)
Oct 26 #Javascript
详谈构造函数加括号与不加括号的区别
Oct 26 #Javascript
JS实现table表格固定表头且表头随横向滚动而滚动
Oct 26 #Javascript
纯JavaScript实现实时反馈系统时间
Oct 26 #Javascript
Vue-router路由判断页面未登录跳转到登录页面的实例
Oct 26 #Javascript
AngularJS实现的省市二级联动功能示例【可对选项实现增删】
Oct 26 #Javascript
input type=file 选择图片并且实现预览效果的实例
Oct 26 #Javascript
You might like
在字符串指定位置插入一段字符串的php代码
2010/02/16 PHP
php strstr查找字符串中是否包含某些字符的查找函数
2010/06/03 PHP
关于session在PHP5的配置文件中的详细设置参数说明
2011/04/20 PHP
PHP简单实现HTTP和HTTPS跨域共享session解决办法
2015/05/27 PHP
PHP定时执行任务实现方法详解(Timer)
2015/07/30 PHP
PHP常见字符串操作函数与用法总结
2019/03/04 PHP
为你的网站增加亮点的9款jQuery插件推荐
2011/05/03 Javascript
javascript 二进制运算技巧解析
2012/11/27 Javascript
图片无缝滚动代码(向左/向下/向上)
2013/04/10 Javascript
获取当前点击按钮的id用this.id实现
2014/03/17 Javascript
JS实现带提示的星级评分效果完整实例
2015/10/30 Javascript
详解JavaScript的流程控制语句
2015/11/30 Javascript
Angular.js如何从PHP读取后台数据
2016/03/24 Javascript
基于HTML5上使用iScroll实现下拉刷新,上拉加载更多
2016/05/21 Javascript
DOM操作和jQuery实现选项移动操作的简单实例
2016/06/07 Javascript
form+iframe解决跨域上传文件的方法
2016/11/18 Javascript
jQuery实现模拟flash头像裁切上传功能示例
2016/12/11 Javascript
AngularJS学习第一篇 AngularJS基础知识
2017/02/13 Javascript
浅谈Node.js 沙箱环境
2018/05/15 Javascript
vue权限路由实现的方法示例总结
2018/07/29 Javascript
Vue $attrs &amp; inheritAttr实现button禁用效果案例
2020/12/07 Vue.js
给Python IDLE加上自动补全和历史功能
2014/11/30 Python
Windows下Eclipse+PyDev配置Python+PyQt4开发环境
2016/05/17 Python
python3爬取各类天气信息
2018/02/24 Python
Python字符串、整数、和浮点型数相互转换实例
2018/08/04 Python
详解Python with/as使用说明
2018/12/13 Python
python django生成迁移文件的实例
2019/08/31 Python
Python获取统计自己的qq群成员信息的方法
2019/11/15 Python
通过celery异步处理一个查询任务的完整代码
2019/11/19 Python
采用冷却技术的超自然舒适度:GhostBed床垫
2018/09/18 全球购物
俄罗斯外国汽车和国产汽车配件网上商店:Движком
2020/04/19 全球购物
初一地理教学反思
2014/01/16 职场文书
网管求职信
2014/03/03 职场文书
如何做好员工培训计划?
2019/07/09 职场文书
CSS3实现360度循环旋转功能
2022/02/12 HTML / CSS
基于Python实现对比Exce的工具
2022/04/07 Python