利用Angular.js限制textarea输入的字数


Posted in Javascript onOctober 20, 2016

前言

大家可能都遇到过在输入的时候做出限制的需求,本文介绍的是通过Angular.js限制textarea输入字数的方法,有需要的朋友们可以参考以下实例。

实例代码如下

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>AngularJS 简单应用程序--输入字数限制</title>
<!--
 @author:sm
 @email:sm0210@qq.com
 @desc:AngularJS 简单应用程序--输入字数限制
-->
</head>
<!--
 AngularJS 应用程序
 您已经学习了足够多关于 AngularJS 的知识,现在可以开始创建您的第一个 AngularJS 应用程序:
-->
<body >
<div ng-app="myTodoApp" ng-controller="myTodoCtrl"> 
 <h2>我的笔记</h2>
 <p><textarea ng-model="message" cols="40" rows="10" ng-readonly="ngreadonly" ></textarea></p>
 <p>
  <button ng-click="save()">保存</button>
  <button ng-click="clear()">清除</button>
 </p>
 <p>剩下字符数:<span ng-bind="left()"></span></p>
</div>
<!--引入angular-->
<script src="js/angular.min.js"></script>
<script language="javascript">
 var app=angular.module("myTodoApp",[]);
 app.controller("myTodoCtrl",function($scope){
 $scope.message="";
 $scope.ngreadonly = false;
 $scope.left = function(){
 if($scope.message.length>100){
 $scope.ngreadonly = true;
 return 0;
 }
 return 100-$scope.message.length;
 }
 $scope.clear = function(){$scope.message="";$scope.ngreadonly = false;}
 $scope.save = function(){$scope.message=""}
 });
</script>
</body>
</html>

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
JS 动态加载脚本的4种方法
May 05 Javascript
jquery选择器(常用选择器说明)
Sep 28 Javascript
IE6、IE7中setAttribute不支持class/for/rowspan/colspan等属性
Aug 28 Javascript
javascript浏览器兼容教程之事件处理
Jun 09 Javascript
node.js中的fs.statSync方法使用说明
Dec 16 Javascript
Bootstrap源码解读模态弹出框(11)
Dec 28 Javascript
jQuery动态生成不规则表格(前后端)
Feb 21 Javascript
javascript DOM的详解及实例代码
Mar 06 Javascript
关于React动态加载路由处理的相关问题
Jan 07 Javascript
Vue动态生成el-checkbox点击无法赋值的解决方法
Feb 21 Javascript
JavaScript this关键字的深入详解
Jan 14 Javascript
vue cli4中mockjs在dev环境和build环境的配置详情
Apr 06 Vue.js
一个极为简单的requirejs实现方法
Oct 20 #Javascript
JavaScript实现窗口抖动效果
Oct 19 #Javascript
原生js图片轮播效果实现代码
Oct 19 #Javascript
Angular2表单自定义验证器的实现
Oct 19 #Javascript
javascript滚轮控制模拟滚动条
Oct 19 #Javascript
Vue.js绑定HTML class数组语法错误的原因分析
Oct 19 #Javascript
微信小程序 教程之wxapp视图容器 swiper
Oct 19 #Javascript
You might like
一键删除顽固的空文件夹 软件下载
2007/01/26 PHP
PHP中的socket_read和socket_recv区别详解
2015/02/09 PHP
教你在header中隐藏php的版本信息
2016/08/10 PHP
thinkPHP5 tablib标签库自定义方法详解
2017/05/10 PHP
浅析PHP中json_encode与json_decode的区别
2020/07/15 PHP
Javascript 布尔型分析
2008/12/22 Javascript
修改好的jquery滚动字幕效果实现代码
2011/06/22 Javascript
jquery选择checked在ie8普通模式下的问题
2014/02/12 Javascript
javascript实现简单的贪吃蛇游戏
2015/03/31 Javascript
简介AngularJS的HTML DOM支持情况
2015/06/17 Javascript
JavaScript:Date类型全面解析
2016/05/19 Javascript
Bootstrap的class样式小结
2016/12/01 Javascript
javascript十六进制数字和ASCII字符之间的转换方法
2016/12/27 Javascript
canvas时钟效果
2017/02/16 Javascript
JavaScript之DOM插入更新删除_动力节点Java学院整理
2017/07/03 Javascript
switchery按钮的使用方法
2017/12/18 Javascript
js实现鼠标点击飘爱心效果
2020/08/19 Javascript
vue-cli3中配置alias和打包加hash值操作
2020/09/04 Javascript
JS实现点击掉落特效
2021/01/29 Javascript
[18:32]DOTA2 HEROS教学视频教你分分钟做大人-谜团
2014/06/12 DOTA
[00:49]完美世界DOTA2联赛10月28日开团时刻:随便打
2020/10/29 DOTA
使用PYTHON接收多播数据的代码
2012/03/01 Python
Python读取图片属性信息的实现方法
2016/09/11 Python
python实现数独游戏 java简单实现数独游戏
2018/03/30 Python
如何在python中写hive脚本
2019/11/08 Python
python实现梯度下降法
2020/03/24 Python
pytorch 限制GPU使用效率详解(计算效率)
2020/06/27 Python
如何用用Python将地址标记在地图上
2021/02/07 Python
路政管理专业推荐信
2013/11/11 职场文书
装修协议书范本
2014/04/21 职场文书
工地质量标语
2014/06/12 职场文书
关于运动会广播稿200字
2014/10/08 职场文书
中学生自我评价范文
2015/03/03 职场文书
幸福终点站观后感
2015/06/04 职场文书
爱国主义电影观后感
2015/06/18 职场文书
感恩教师主题班会
2015/08/12 职场文书