利用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编程起步(第二课)
Feb 27 Javascript
jquery.messager.js插件导致页面抖动的解决方法
Jul 14 Javascript
jQuery操作CheckBox的方法介绍(选中,取消,取值)
Feb 04 Javascript
js获得网页背景色和字体色的方法
Mar 21 Javascript
JQuery 在线引用及测试引用是否成功
Jun 24 Javascript
jQuery实现二维码扫描功能
Jan 09 Javascript
微信小程序 动态传参实例详解
Apr 27 Javascript
seaJs使用心得之exports与module.exports的区别实例分析
Oct 13 Javascript
实现图片首尾平滑轮播(JS原生方法—节流)
Oct 17 Javascript
BootStrap table实现表格行拖拽效果
Dec 01 Javascript
vue实现多组关键词对应高亮显示功能
Jul 25 Javascript
JavaScript实现左右滚动电影画布
Feb 06 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求最大子序列和的算法实现
2011/06/24 PHP
php面向对象 字段的声明与使用
2012/06/14 PHP
php密码生成类实例
2014/09/24 PHP
网页的分页下标生成代码(PHP后端方法)
2016/02/03 PHP
PHP简单遍历对象示例
2016/09/28 PHP
laravel 出现command not found问题的解决方案
2019/10/23 PHP
Mootools 1.2教程 定时器和哈希简介
2009/09/15 Javascript
原生javascript模仿win8等待提示圆圈进度条
2014/04/24 Javascript
深入解析jQuery中Deferred的deferred.promise()方法
2016/05/03 Javascript
AngularJS内建服务$location及其功能详解
2016/07/01 Javascript
JS如何设置iOS中微信浏览器的title
2016/11/22 Javascript
微信小程序 九宫格实例代码
2017/01/21 Javascript
BootStrap Table 后台数据绑定、特殊列处理、排序功能
2017/05/27 Javascript
vue中路由参数传递可能会遇到的坑
2017/12/07 Javascript
element 结合vue 在表单验证时有值却提示错误的解决办法
2018/01/22 Javascript
JavaScript实现的DOM树遍历方法详解【二叉DOM树、多叉DOM树】
2018/05/07 Javascript
详解Vue内部怎样处理props选项的多种写法
2018/11/06 Javascript
python数据抓取分析的示例代码(python + mongodb)
2017/12/25 Python
pygame游戏之旅 python和pygame安装教程
2018/11/20 Python
使用 Python 写一个简易的抽奖程序
2019/12/08 Python
Python matplotlib画曲线例题解析
2020/02/07 Python
Nginx+Uwsgi+Django 项目部署到服务器的思路详解
2020/05/08 Python
Python在后台自动解压各种压缩文件的实现方法
2020/11/10 Python
Html5 Canvas 实现一个“刮刮乐”游戏
2019/09/05 HTML / CSS
用html5绘制折线图的实例代码
2016/03/25 HTML / CSS
奥地利顶级内衣丝袜品牌英国站:Wolford英国
2016/08/29 全球购物
eBay澳大利亚站:eBay.com.au
2018/02/02 全球购物
Lampenwelt德国:欧洲领先的灯具和照明在线商店
2018/08/05 全球购物
公司同意接收函
2014/01/13 职场文书
党员民主评议总结
2014/10/20 职场文书
教师学习党的群众路线教育实践活动心得体会
2014/10/31 职场文书
2014年平安创建工作总结
2014/11/24 职场文书
2014年学生资助工作总结
2014/12/18 职场文书
个人思想政治总结
2015/03/05 职场文书
python析构函数用法及注意事项
2021/06/22 Python
springboot集成redis存对象乱码的问题及解决
2022/06/16 Java/Android