利用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 相关文章推荐
学习ExtJS TextField常用方法
Oct 07 Javascript
讨论javascript(一)工厂方式 js面象对象的定义方法
Dec 15 Javascript
jQuery提示效果代码分享
Nov 20 Javascript
Jquery实现动态切换图片的方法
May 18 Javascript
使用Bootstrap typeahead插件实现搜索框自动补全的方法
Jul 07 Javascript
Node.js中使用jQuery的做法
Aug 17 Javascript
JS实现的手机端精简幻灯片效果
Sep 05 Javascript
jQuery展示表格点击变色、全选、删除
Jan 05 Javascript
canvas绘制七巧板
Feb 03 Javascript
js实现QQ面板拖拽效果(慕课网DOM事件探秘)(全)
Sep 19 Javascript
vue.config.js中配置Vue的路径别名的方法
Feb 11 Javascript
Vue.js获取手机系统型号、版本、浏览器类型的示例代码
May 10 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
十天学会php之第七天
2006/10/09 PHP
php学习笔记 php中面向对象三大特性之一[封装性]的应用
2011/06/13 PHP
ecshop 批量上传(加入自定义属性)
2012/03/20 PHP
php实现给二维数组中所有一维数组添加值的方法
2017/02/04 PHP
PHP设置Cookie的HTTPONLY属性方法
2017/02/09 PHP
jQuery ready函数滥用分析
2011/02/16 Javascript
JQuery里面的几种选择器 查找满足条件的元素$(&quot;#控件ID&quot;)
2011/08/23 Javascript
Javascript继承(上)——对象构建介绍
2012/11/08 Javascript
jquery text(),val(),html()方法区别总结
2013/11/04 Javascript
给文字加上着重号的JS代码
2013/11/12 Javascript
NodeJS url验证(url-valid)的使用方法
2013/11/18 NodeJs
Extjs中RowExpander控件的默认展开问题示例探讨
2014/01/24 Javascript
node.js中的fs.utimes方法使用说明
2014/12/15 Javascript
Node.js和MongoDB实现简单日志分析系统
2015/04/25 Javascript
javascript如何定义对象数组
2016/06/07 Javascript
js实现hashtable的赋值、取值、遍历操作实例详解
2016/12/25 Javascript
微信小程序本地缓存数据增删改查实例详解
2017/05/24 Javascript
详解如何提高 webpack 构建 Vue 项目的速度
2017/07/03 Javascript
通过vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题
2018/04/08 Javascript
vue生命周期与钩子函数简单示例
2019/03/13 Javascript
axios+Vue实现上传文件显示进度功能
2019/04/14 Javascript
Python实现连接postgresql数据库的方法分析
2017/12/27 Python
python 类对象和实例对象动态添加方法(分享)
2017/12/31 Python
在python3.5中使用OpenCV的实例讲解
2018/04/02 Python
Python 读写文件的操作代码
2018/09/20 Python
Python如何发布程序的详细教程
2018/10/09 Python
python使用paramiko模块通过ssh2协议对交换机进行配置的方法
2019/07/25 Python
Django实现文件上传下载功能
2019/10/06 Python
python+selenium自动化实战携带cookies模拟登陆微博
2021/01/19 Python
车间副主任岗位职责
2013/12/24 职场文书
竞选班长演讲稿500字
2014/08/22 职场文书
党章培训心得体会
2014/09/04 职场文书
司机工作自我鉴定
2014/09/19 职场文书
交通事故和解协议书
2014/09/25 职场文书
个人求职自荐信范文
2015/03/06 职场文书
妇产科护理心得体会
2016/01/22 职场文书