利用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 设置文本框中焦点的位置
Nov 20 Javascript
javascript 动态生成私有变量访问器
Dec 06 Javascript
jQuery获取CSS样式中的颜色值的问题,不同浏览器格式不同的解决办法
May 13 Javascript
非常好用的JsonToString 方法 简单实例
Jul 18 Javascript
JS父页面与子页面相互传值方法
Mar 05 Javascript
JavaScript的null和undefined区别示例介绍
Sep 15 Javascript
详解angular element()方法使用
Apr 08 Javascript
JavaScript实现单击网页任意位置打开新窗口与关闭窗口的方法
Sep 21 Javascript
vant(ZanUi)结合async-validator实现表单验证的方法
Dec 06 Javascript
extjs图形绘制之饼图实现方法分析
Mar 06 Javascript
jQuery开发仿QQ版音乐播放器
Jul 10 jQuery
angular *Ngif else用法详解
Dec 15 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
最小化数据传输――在客户端存储数据
2006/10/09 PHP
在mysql数据库原有字段后增加新内容
2009/11/26 PHP
PHP中用接口、抽象类、普通基类实现“面向接口编程”与“耦合方法”简述
2011/03/23 PHP
如何使用FireFox插件FirePHP调试PHP
2013/07/23 PHP
ThinkPHP的模版中调用session数据的方法
2014/07/01 PHP
php正则匹配html中带class的div并选取其中内容的方法
2015/01/13 PHP
分享3个php获取日历的函数
2015/09/25 PHP
jQuery使用手册之一
2007/03/24 Javascript
深入理解JavaScript系列(42):设计模式之原型模式详解
2015/03/04 Javascript
JavaScript实现判断图片是否加载完成的3种方法整理
2015/03/13 Javascript
JavaScript将字符串转换为整数的方法
2015/04/14 Javascript
几种经典排序算法的JS实现方法
2016/03/25 Javascript
AngularJs学习第八篇 过滤器filter创建
2016/06/08 Javascript
微信小程序 animation API详解及实例代码
2016/10/08 Javascript
React Native实现地址挑选器功能
2017/10/24 Javascript
微信小程序scroll-view仿拼多多横向滑动滚动条
2020/04/21 Javascript
vue基于element的区间选择组件
2018/09/07 Javascript
从零到一详聊创建Vue工程及遇到的常见问题
2019/04/25 Javascript
小程序封装路由文件和路由方法(5种全解析)
2019/05/26 Javascript
Vant picker 多级联动操作
2020/11/02 Javascript
[02:41]DOTA2英雄基础教程 冥魂大帝
2014/01/16 DOTA
详解python-图像处理(映射变换)
2019/03/22 Python
Python程序暂停的正常处理方法
2019/11/07 Python
Django实现从数据库中获取到的数据转换为dict
2020/03/27 Python
python中封包建立过程实例
2021/02/18 Python
CSS3弹性盒模型开发笔记(一)
2016/04/26 HTML / CSS
车间操作工岗位职责
2013/12/19 职场文书
总裁办公室主任职责
2014/01/02 职场文书
行政人事专员岗位职责
2014/03/05 职场文书
职员竞岗演讲稿
2014/05/14 职场文书
留学生求职信
2014/06/03 职场文书
上海世博会口号
2014/06/19 职场文书
运动会演讲稿50字
2014/08/25 职场文书
微信小程序用户授权最佳实践指南
2021/05/08 Javascript
Redis 彻底禁用RDB持久化操作
2021/07/09 Redis
与Windows10相比Windows11有哪些改进?值不值得升级?
2021/11/21 数码科技