利用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客户端将指定区域导出到Word、Excel的代码
Oct 22 Javascript
jquery 中多条件选择器,相对选择器,层次选择器的区别
Jul 03 Javascript
JavaScript mapreduce工作原理简析
Nov 25 Javascript
用JavaScript获取DOM元素位置和尺寸大小的方法
Apr 12 Javascript
jquery 单引号和双引号的区别及使用注意
Jul 31 Javascript
jQuery中get()方法用法实例
Dec 27 Javascript
Javascript 函数的四种调用模式
Nov 05 Javascript
使用原生js封装的ajax实例(兼容jsonp)
Oct 12 Javascript
vue实现滑动切换效果(仅在手机模式下可用)
Jun 29 Javascript
JS实现横向轮播图(初级版)
Jun 24 Javascript
Openlayers学习之地图比例尺控件
Sep 28 Javascript
使用JS实现简易计算器
Jun 14 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
77A一级收信机修理记
2021/03/02 无线电
使用PHP获取网络文件的实现代码
2010/01/01 PHP
php中实现可以返回多个值的函数实例
2015/03/21 PHP
php使用crypt()函数进行加密
2017/06/08 PHP
jquery 图片预加载 自动等比例缩放插件
2008/12/25 Javascript
Jsonp 跨域的原理以及Jquery的解决方案
2010/05/18 Javascript
js函数定时器实现定时读取系统实时连接数
2014/04/30 Javascript
一款由jquery实现的整屏切换特效
2014/09/15 Javascript
NodeJS学习笔记之Connect中间件模块(二)
2015/01/27 NodeJs
JS仿iGoogle自定义首页模块拖拽特效的方法
2015/02/13 Javascript
jquery实现表格隔行换色效果
2015/11/19 Javascript
探究JavaScript函数式编程的乐趣
2015/12/14 Javascript
JavaScript如何实现组合列表框中元素移动效果
2016/03/01 Javascript
AngularJS使用指令增强标准表单元素功能
2016/07/01 Javascript
Bootstrap零基础入门教程(三)
2016/07/18 Javascript
详解Jquery Easyui的验证扩展
2017/01/09 Javascript
vue 计时器组件的实现代码
2017/09/14 Javascript
ES6 javascript的异步操作实例详解
2017/10/30 Javascript
javascript中的replace函数(带注释demo)
2018/01/07 Javascript
PM2自动部署代码步骤流程总结
2018/12/10 Javascript
vue实现的仿淘宝购物车功能详解
2019/01/27 Javascript
vue App.vue中的公共组件改变值触发其他组件或.vue页面监听
2019/05/31 Javascript
react quill中图片上传由默认转成base64改成上传到服务器的方法
2019/10/30 Javascript
django 删除数据库表后重新同步的方法
2018/05/27 Python
python设置值及NaN值处理方法
2018/07/03 Python
python 异或加密字符串的实例
2018/10/14 Python
对dataframe数据之间求补集的实例详解
2019/01/30 Python
详解如何修改jupyter notebook的默认目录和默认浏览器
2021/01/24 Python
CSS3 linear-gradient线性渐变生成加号和减号的方法
2017/11/21 HTML / CSS
Madda Fella官网:美国冒险家服装品牌
2020/01/16 全球购物
比较一下entity bean和session bean
2013/12/27 面试题
户籍证明的格式
2014/01/13 职场文书
JavaScript offset实现鼠标坐标获取和窗口内模块拖动
2021/05/30 Javascript
教你使用一行Python代码玩遍童年的小游戏
2021/08/23 Python
redis数据结构之压缩列表
2022/03/21 Redis
【海涛七七解说】DCG第二周:DK VS 天禄
2022/04/01 DOTA