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 相关文章推荐
Extjs学习笔记之一 初识Extjs之MessageBox
Jan 07 Javascript
javascript 隔行换色函数代码
Oct 24 Javascript
jquery单行文字向上滚动效果示例
Mar 06 Javascript
深入理解JavaScript系列(27):设计模式之建造者模式详解
Mar 03 Javascript
bootstrap-treeview自定义双击事件实现方法
Jan 09 Javascript
jQuery插件HighCharts实现的2D条状图效果示例【附demo源码下载】
Mar 15 Javascript
Angular 4依赖注入学习教程之ValueProvider的使用(七)
Jun 04 Javascript
Vue2.0用 watch 观察 prop 变化(不触发)
Sep 08 Javascript
Vue cli 引入第三方JS和CSS的常用方法分享
Jan 20 Javascript
Vue.extend实现挂载到实例上的方法
May 01 Javascript
过滤器vue.filters的使用方法实现
Sep 18 Javascript
vue表单中遍历表单操作按钮的显示隐藏示例
Oct 30 Javascript
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实现的随机广告显示代码
2007/06/14 PHP
浏览器预览PHP文件时顶部出现空白影响布局分析原因及解决办法
2013/01/11 PHP
利用PHP fsockopen 模拟POST/GET传送数据的方法
2015/09/22 PHP
Yii框架参数化查询中IN查询只能查询一个的解决方法
2017/05/20 PHP
PHP PDO操作MySQL基础教程
2017/06/05 PHP
创建一个复制UBB软件信息的链接或按钮的js代码
2008/01/06 Javascript
js focus不起作用的解决方法(主要是因为dom元素是否加载完成)
2010/11/05 Javascript
纯js实现背景图片切换效果代码
2010/11/14 Javascript
FusionCharts图表显示双Y轴双(多)曲线
2012/11/22 Javascript
Javascript使用post方法提交数据实例
2015/08/03 Javascript
js闭包引起的事件注册问题介绍
2016/03/29 Javascript
谈一谈JS消息机制和事件机制的理解
2016/04/14 Javascript
jQuery事件对象总结
2016/10/17 Javascript
JavaScript实现移动端页面按手机屏幕分辨率自动缩放的最强代码
2017/08/18 Javascript
Vue0.1的过滤代码如何添加到Vue2.0直接使用
2017/08/23 Javascript
你应该知道的几类npm依赖包管理详解
2017/10/06 Javascript
js中DOM事件绑定分析
2018/03/18 Javascript
jsonp跨域及实现百度首页联想功能的方法
2018/08/30 Javascript
vue axios数据请求及vue中使用axios的方法
2018/09/10 Javascript
JS实现盒子拖拽效果
2020/02/06 Javascript
WebPack工具运行原理及入门教程
2020/12/02 Javascript
Python实现带百分比的进度条
2016/06/28 Python
python使用opencv进行人脸识别
2017/04/07 Python
[原创]windows下Anaconda的安装与配置正解(Anaconda入门教程)
2018/04/05 Python
搞清楚 Python traceback的具体使用方法
2019/05/13 Python
TensorFlow2.0:张量的合并与分割实例
2020/01/19 Python
python 从list中随机取值的方法
2020/11/16 Python
2分钟教你实现环形/扇形菜单(基础版)
2020/01/15 HTML / CSS
荷兰男士时尚网上商店:Suitable
2017/12/25 全球购物
Hotels.com韩国:海外国内旅行所需的酒店和住宿预订网站
2020/05/08 全球购物
如何判断计算机可能已经中马
2013/03/22 面试题
教师求职信范文分享
2013/12/27 职场文书
竞选学生会演讲稿
2014/04/25 职场文书
省级优秀毕业生主要事迹
2014/05/29 职场文书
广播体操口号
2014/06/18 职场文书
浅谈MySQL user权限表
2021/06/18 MySQL