利用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 相关文章推荐
JavaScript 密码强度判断代码
Sep 05 Javascript
jQuery实现文本框输入同步的方法
Jun 20 Javascript
JavaScript 封装一个tab效果源码分享
Sep 15 Javascript
JQuery.Ajax()的data参数类型实例详解
Nov 20 Javascript
基于openlayers4实现点的扩散效果
Aug 17 Javascript
vue slot 在子组件中显示父组件传递的模板
Mar 02 Javascript
基于vue中keep-alive缓存问题的解决方法
Sep 21 Javascript
JavaScript设计模式之装饰者模式实例详解
Jan 17 Javascript
vue element upload实现图片本地预览
Aug 20 Javascript
layui-tree实现Ajax异步请求后动态添加节点的方法
Sep 23 Javascript
vue前端工程的搭建
Mar 31 Vue.js
vue首次渲染全过程
Apr 21 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
PHP中的串行化变量和序列化对象
2006/09/05 PHP
js下函数般调用正则的方法附代码
2008/06/22 PHP
fleaphp下不确定的多条件查询的巧妙解决方法
2008/09/11 PHP
Yii2验证器(Validator)用法分析
2016/07/23 PHP
PHP多进程编程之僵尸进程问题的理解
2017/10/15 PHP
基于Jquery+Ajax+Json的高效分页实现代码
2011/10/29 Javascript
JSON+JavaScript处理JSON的简单例子
2013/03/20 Javascript
Angularjs编写KindEditor,UEidtor,jQuery指令
2015/01/28 Javascript
每天一篇javascript学习小结(String对象)
2015/11/18 Javascript
JS获取IMG图片高宽的简单实例
2016/05/17 Javascript
TinyMCE汉化及本地上传图片功能实例详解
2016/05/31 Javascript
jquery+CSS3实现3D拖拽相册效果
2016/07/18 Javascript
关于Iframe父页面与子页面之间的相互调用
2016/11/22 Javascript
bootstrap导航栏、下拉菜单、表单的简单应用实例解析
2017/01/06 Javascript
Node.js发送HTTP客户端请求并显示响应结果的方法示例
2017/04/12 Javascript
js 用于检测类数组对象的函数方法
2017/05/02 Javascript
手把手教你vue-cli单页到多页应用的方法
2018/05/31 Javascript
原生JS实现的自动轮播图功能详解
2018/12/28 Javascript
pm2启动ssr失败的解决方法
2019/06/29 Javascript
python3图片转换二进制存入mysql
2013/12/06 Python
详解python并发获取snmp信息及性能测试
2017/03/27 Python
python生成ppt的方法
2018/06/07 Python
python实现代码统计程序
2019/09/19 Python
SpringBoot实现登录注册常见问题解决方案
2020/03/04 Python
PyCharm中关于安装第三方包的三个建议
2020/09/17 Python
详解CSS3原生支持div铺满浏览器的方法
2018/08/30 HTML / CSS
让ie浏览器成为支持html5的浏览器的解决方法(使用html5shiv)
2014/04/08 HTML / CSS
店长岗位的工作内容
2013/11/12 职场文书
甜美蛋糕店创业计划书
2014/01/30 职场文书
五年级英语教学反思
2014/01/31 职场文书
专业求职信撰写要诀
2014/02/18 职场文书
成语的广告词
2014/03/19 职场文书
出生公证委托书
2014/04/03 职场文书
使用pandas或numpy处理数据中的空值(np.isnan()/pd.isnull())
2021/05/14 Python
海贼王十大潜力果实,路飞仅排第十,第一可毁世界(震震果实)
2022/03/18 日漫
详解OpenCV获取高动态范围(HDR)成像
2022/04/29 Python