利用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高级程序设计》阅读笔记(二) ECMAScript中的原始类型
Feb 27 Javascript
jQuery中将函数赋值给变量的调用方法
Mar 23 Javascript
jquery Tab效果和动态加载的简单实例
Dec 11 Javascript
javascript实现网页子页面遍历回调的方法(涉及 window.frames、递归函数、函数上下文)
Jul 27 Javascript
jquery实现可横向和竖向展开的动态下滑菜单效果
Aug 24 Javascript
Angular.Js的自动化测试详解
Dec 09 Javascript
JS得到当前时间的方法示例
Mar 24 Javascript
vue实现底部菜单功能
Jul 24 Javascript
详解Vue中使用Axios拦截器
Apr 22 Javascript
微信小程序 行的删除和增加操作实现详解
Sep 29 Javascript
vue跳转同一个组件,参数不同,页面接收值只接收一次的解决方法
Nov 05 Javascript
如何使用 JavaScript 操作浏览器历史记录 API
Nov 24 Javascript
一个极为简单的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
德生PL660的电路分析和打磨
2021/03/02 无线电
用PHP连接Oracle数据库
2006/10/09 PHP
留言板翻页的实现详解
2006/10/09 PHP
php empty函数 使用说明
2009/08/10 PHP
PHP加Nginx实现动态裁剪图片方案
2014/03/10 PHP
PHP获取浏览器信息类和客户端地理位置的2个方法
2014/04/24 PHP
php使用Jpgraph绘制简单X-Y坐标图的方法
2015/06/10 PHP
Thinkphp结合ajaxFileUpload实现异步图片传输示例
2017/03/13 PHP
php安全配置记录和常见错误梳理(总结)
2017/03/28 PHP
javascript nextSibling 与 getNextElement(node) 使用介绍
2011/10/13 Javascript
jquery的相对父元素和相对文档定位示例代码
2013/08/02 Javascript
js检测浏览器版本、核心、是否移动端示例
2014/04/24 Javascript
HTML5使用DeviceOrientation实现摇一摇功能
2015/06/05 Javascript
jQuery学习笔记之Ajax用法实例详解
2015/12/01 Javascript
使用JS实现图片展示瀑布流效果(简单实例)
2016/09/06 Javascript
weUI应用之JS常用信息提示弹层的封装
2016/11/21 Javascript
Mongoose经常返回e11000 error的原因分析
2017/03/29 Javascript
实例分析js事件循环机制
2017/12/13 Javascript
vue中使用refs定位dom出现undefined的解决方法
2017/12/21 Javascript
vue实现添加与删除图书功能
2018/10/07 Javascript
layer.open的自适应及居中及子页面标题的修改方法
2019/09/05 Javascript
layer关闭弹出窗口触发表单提交问题的处理方法
2019/09/25 Javascript
p5.js实现动态图形临摹
2019/10/23 Javascript
Python设计模式之代理模式简单示例
2018/01/09 Python
TensorFlow实现Logistic回归
2018/09/07 Python
python3.6使用SMTP协议发送邮件
2020/05/20 Python
Python基于BeautifulSoup爬取京东商品信息
2020/06/01 Python
CSS3自定义滚动条样式的示例代码
2017/08/21 HTML / CSS
app内嵌H5 webview 本地缓存问题的解决
2020/10/19 HTML / CSS
英国最大的在线床超市:Bed Star
2019/01/24 全球购物
专科毕业生自我鉴定
2013/12/01 职场文书
机电一体化专业推荐信
2013/12/03 职场文书
小学语文业务学习材料
2014/06/02 职场文书
和谐家庭事迹材料
2014/12/20 职场文书
反腐倡廉主题教育活动总结
2015/05/07 职场文书
矛盾论读书笔记
2015/06/29 职场文书