利用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 获取事件对象的注意点
Jul 29 Javascript
javaScript让文本框内的最后一个文字的后面获得焦点实现代码
Jan 06 Javascript
jQuery将所有被选中的checkbox某个属性值连接成字符串的方法
Jan 24 Javascript
jQuery中$this和$(this)的区别介绍(一看就懂)
Jul 06 Javascript
jQuery实现仿新浪微博浮动的消息提示框(可智能定位)
Oct 10 Javascript
果断收藏9个Javascript代码高亮脚本
Jan 06 Javascript
jQuery 判断是否包含在数组中Array[]的方法
Aug 03 Javascript
AngularJS中$injector、$rootScope和$scope的概念和关联关系深入分析
Jan 19 Javascript
让你5分钟掌握9个JavaScript小技巧
Jun 09 Javascript
this在vue和小程序中的使用详解
Jan 28 Javascript
在vue中使用console.log无效的解决
Aug 09 Javascript
JavaScript实现班级抽签小程序
May 19 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 实现进制转换(二进制、八进制、十六进制)互相转换实现代码
2010/10/22 PHP
thinkphp实现数组分页示例
2014/04/13 PHP
php写的AES加密解密类分享
2014/06/20 PHP
PHP-Java-Bridge使用笔记
2014/09/22 PHP
php官方微信接口大全(微信支付、微信红包、微信摇一摇、微信小店)
2015/12/21 PHP
Yii模型操作之criteria查找数据库的方法
2016/07/15 PHP
Yii 访问 Gii(脚手架)时出现 403 错误
2018/06/06 PHP
js获取height和width的方法说明
2013/01/06 Javascript
JS+ACTIVEX实现网页选择本地目录路径对话框
2013/03/18 Javascript
Javascript连接多个数组不用concat来解决
2014/03/24 Javascript
控制文字内容的显示与隐藏示例
2014/06/11 Javascript
javascript匿名函数实例分析
2014/11/18 Javascript
jQuery寻找n以内完全数的方法
2015/06/24 Javascript
AngularJs html compiler详解及示例代码
2016/09/01 Javascript
JavaScript实现翻页功能(附效果图)
2017/02/16 Javascript
JavaScript实现的XML与JSON互转功能详解
2017/02/16 Javascript
angular.js4使用 RxJS 处理多个 Http 请求
2017/09/23 Javascript
react中的ajax封装实例详解
2017/10/17 Javascript
JavaScript编程设计模式之构造器模式实例分析
2017/10/25 Javascript
详解babel升级到7.X采坑总结
2019/05/12 Javascript
vue页面引入three.js实现3d动画场景操作
2020/08/10 Javascript
python判断图片宽度和高度后删除图片的方法
2015/05/22 Python
Python正则表达式教程之三:贪婪/非贪婪特性
2017/03/02 Python
Python二进制串转换为通用字符串的方法
2018/07/23 Python
浅谈python的dataframe与series的创建方法
2018/11/12 Python
Python for i in range ()用法详解
2020/09/18 Python
python函数enumerate,operator和Counter使用技巧实例小结
2020/02/22 Python
Html5移动端适配IphoneX等机型的方法
2019/06/25 HTML / CSS
英国领先的葡萄酒专家:Majestic Wine
2017/05/30 全球购物
如何开发安全的AJAX应用
2014/03/26 面试题
医学专业个人求职自荐信格式
2013/09/23 职场文书
垃圾桶标语
2014/06/24 职场文书
列车乘务员工作不细心检讨书
2014/10/07 职场文书
2016优秀毕业生个人事迹材料
2016/02/29 职场文书
python 模块重载的五种方法
2021/04/24 Python
如何用JS实现简单的数据监听
2021/05/06 Javascript