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 相关文章推荐
jquery实现背景墙聚光灯效果示例分享
Mar 02 Javascript
兼容最新firefox、chrome和IE的javascript图片预览实现代码
Aug 08 Javascript
jquery 无限极下拉菜单的简单实例(精简浓缩版)
May 31 Javascript
JS实现输入框提示文字点击时消失效果
Jul 19 Javascript
Node.js下自定义错误类型详解
Oct 17 Javascript
Angular工具方法学习
Dec 26 Javascript
vue实现列表的添加点击
Dec 29 Javascript
Javascript中数组去重与拍平的方法示例
Feb 03 Javascript
详解微信第三方小程序代开发
Jun 23 Javascript
解读vue生成的文件目录结构及说明
Nov 27 Javascript
vue router 组件的高级应用实例代码
Apr 08 Javascript
JavaScript实现商品评价五星好评
Nov 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调用新浪短链接API的方法
2014/11/08 PHP
Yii2.0使用阿里云OSS的SDK上传图片、下载、删除图片示例
2017/09/20 PHP
javascript 限制输入和粘贴(IE,firefox测试通过)
2008/11/14 Javascript
js跨域问题之跨域iframe自适应大小实现代码
2010/07/17 Javascript
javascript 运算数的求值顺序
2011/08/23 Javascript
一个字符串反转函数可实现字符串倒序
2014/09/15 Javascript
javascript转换日期字符串为Date日期对象的方法
2015/02/13 Javascript
jquery图片切换实例分析
2015/04/15 Javascript
深入剖析JavaScript编程中的对象概念
2015/10/21 Javascript
js实现自动轮换选项卡
2017/01/13 Javascript
vue在自定义组件中使用v-model进行数据绑定的方法
2019/03/25 Javascript
Vue使用Canvas绘制图片、矩形、线条、文字,下载图片
2019/04/26 Javascript
fastadmin中调用js的方法
2019/05/14 Javascript
通过vue手动封装on、emit、off的代码详解
2019/05/29 Javascript
微信小程序 生成携带参数的二维码
2019/10/23 Javascript
微信小程序页面间传递数组对象方法解析
2019/11/06 Javascript
vue学习笔记之给组件绑定原生事件操作示例
2020/02/27 Javascript
[01:50]WODOTA制作 DOTA2中文宣传片《HERO》
2013/04/28 DOTA
Pyramid将models.py文件的内容分布到多个文件的方法
2013/11/27 Python
在Ubuntu系统下安装使用Python的GUI工具wxPython
2016/02/18 Python
python实现SMTP邮件发送功能
2020/06/16 Python
Django ORM 聚合查询和分组查询实现详解
2019/08/09 Python
浅谈tensorflow中张量的提取值和赋值
2020/01/19 Python
Python实现CAN报文转换工具教程
2020/05/05 Python
Python操作Elasticsearch处理timeout超时
2020/07/17 Python
python 用pandas实现数据透视表功能
2020/12/21 Python
微信浏览器左上角返回按钮拦截功能
2017/11/21 HTML / CSS
HTML5表格_动力节点Java学院整理
2017/07/11 HTML / CSS
英国领先的品牌珠宝和配件供应商:Acotis Jewellery
2018/03/07 全球购物
教师求职信范文分享
2013/12/27 职场文书
军训鉴定表自我鉴定
2014/02/13 职场文书
闭幕式主持词
2014/04/02 职场文书
2015年“7.11”世界人口日宣传活动方案
2015/05/06 职场文书
史上最全的军训拉歌口号
2015/12/25 职场文书
《追风筝的人》:人心中的成见是座大山,但请不忘初心
2019/11/15 职场文书
从原生JavaScript到React深入理解
2022/07/23 Javascript