利用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 相关文章推荐
isArray()函数(JavaScript中对象类型判断的几种方法)
Nov 26 Javascript
jQuery UI的Dialog无法提交问题的解决方法
Jan 11 Javascript
再谈javascript面向对象编程
Mar 18 Javascript
jquery ajax提交整个表单元素的快捷办法
Mar 27 Javascript
node.js中的url.parse方法使用说明
Dec 10 Javascript
初步认识JavaScript函数库jQuery
Jun 18 Javascript
Bootstrap每天必学之模态框(Modal)插件
Apr 26 Javascript
深入理解javascript中concat方法
Dec 12 Javascript
详解vue服务端渲染(SSR)初探
Jun 19 Javascript
代码详解Vuejs响应式原理
Dec 20 Javascript
vue操作动画的记录animate.css实例代码
Apr 26 Javascript
ES6 Promise对象的含义和基本用法分析
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
又拍云异步上传实例教程详解
2016/04/19 PHP
PHP flush 函数使用注意事项
2016/08/26 PHP
轻松实现php文件上传功能
2017/02/17 PHP
PHP7原生MySQL数据库操作实现代码
2020/07/03 PHP
Avengerls vs Newbee BO3 第一场2.18
2021/03/10 DOTA
关于juqery radio写法的兼容性问题(新老版本jquery)
2010/06/14 Javascript
jquery 插件学习(六)
2012/08/06 Javascript
html5的自定义data-*属性和jquery的data()方法的使用示例
2013/08/21 Javascript
七个不允许错过的jQuery小技巧
2015/12/21 Javascript
jQuery的选择器中的通配符[id^='code']或[name^='code']及jquery选择器总结
2015/12/24 Javascript
jQuery form插件之formDdata参数校验表单及验证后提交
2016/01/23 Javascript
TypeScript学习之强制类型的转换
2016/12/27 Javascript
JS对象是否拥有某属性如何判断
2017/02/03 Javascript
vue组件父子间通信详解(三)
2017/11/07 Javascript
Vue.js 点击按钮显示/隐藏内容的实例代码
2018/02/08 Javascript
详解使用vue-admin-template的优化历程
2018/05/20 Javascript
Angular CLI 使用教程指南参考小结
2019/04/10 Javascript
在vue中使用echars实现上浮与下钻效果
2019/11/08 Javascript
JavaScript获取当前url路径过程解析
2019/12/27 Javascript
跟老齐学Python之数据类型总结
2014/09/24 Python
使用Python实现一个简单的项目监控
2015/03/31 Python
Python中用于去除空格的三个函数的使用小结
2015/04/07 Python
网站渗透常用Python小脚本查询同ip网站
2017/05/08 Python
Python虚拟环境virtualenv的安装与使用详解
2017/05/28 Python
Django框架的使用教程路由请求响应的方法
2018/07/03 Python
解决django的template中如果无法引用MEDIA_URL问题
2020/04/07 Python
使用CSS3的::selection改变选中文本颜色的方法
2015/09/29 HTML / CSS
HTML5 UTF-8 中文乱码的解决方法
2013/11/18 HTML / CSS
使用Vue.js和MJML创建响应式电子邮件
2021/03/23 Vue.js
党校毕业心得体会
2014/09/13 职场文书
个人事迹材料范文
2014/12/29 职场文书
酒店工程部主管岗位职责
2015/04/16 职场文书
解决thinkphp6(tp6)在状态码500下不报错,或者显示错误“Malformed UTF-8 characters”的问题
2021/04/01 PHP
Python办公自动化之Excel(中)
2021/05/24 Python
go select编译期的优化处理逻辑使用场景分析
2021/06/28 Golang
Netflix《海贼王》真人版剧集多张片场照曝光
2022/04/04 日漫