利用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 相关文章推荐
js实现权限树的更新权限时的全选全消功能
Feb 17 Javascript
JAVASCRIPT实现的WEB页面跳转以及页面间传值方法
May 13 Javascript
js 数值项目的格式化函数代码
May 14 Javascript
jQuery EasyUI中对表格进行编辑的实现代码
Jun 10 Javascript
动态加载外部javascript文件的函数代码分享
Jul 28 Javascript
javascript实现table选中的行以指定颜色高亮显示的方法
May 13 Javascript
js实现仿qq消息的弹出窗效果
Jan 06 Javascript
vuejs指令详解
Feb 07 Javascript
JavaScript简单拖拽效果(1)
May 17 Javascript
vue-test-utils初使用详解
May 23 Javascript
微信小程序跨页面传递data数据方法解析
Dec 13 Javascript
canvas绘制折线路径动画实现
May 12 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
一个ubbcode的函数,速度很快.
2006/10/09 PHP
ob_start(),ob_start('ob_gzhandler')使用
2006/12/25 PHP
谨慎使用PHP的引用原因分析
2012/09/06 PHP
PHP 简易输出CSV表格文件的方法详解
2013/06/20 PHP
PHP获取指定函数定义在哪个文件中以及其所在的行号实例
2014/05/08 PHP
php通过session防url攻击方法
2014/12/10 PHP
php模拟post提交数据的方法
2015/02/12 PHP
PHP常量及变量区别原理详解
2020/08/14 PHP
Jquery+JSon 无刷新分页实现代码
2010/04/01 Javascript
兼容IE和FF的js脚本代码小结(比较常用)
2010/12/06 Javascript
js对象数组按属性快速排序
2011/01/31 Javascript
解决Jquery向页面append新元素之后事件的绑定问题
2015/03/16 Javascript
JS使用ajax从xml文件动态获取数据显示的方法
2015/03/24 Javascript
input 禁止输入特殊字符的四种实现方式
2016/08/24 Javascript
nodejs使用redis作为缓存介质实现的封装缓存类示例
2018/02/07 NodeJs
使用watch监听路由变化和watch监听对象的实例
2018/02/24 Javascript
服务端预渲染之Nuxt(使用篇)
2019/04/08 Javascript
Vue实现导航栏的显示开关控制
2019/11/01 Javascript
微信小程序wxml列表渲染原理解析
2019/11/27 Javascript
从源码角度来回答keep-alive组件的缓存原理
2021/01/18 Javascript
Python和php通信乱码问题解决方法
2014/04/15 Python
Windows下PyMongo下载及安装教程
2015/04/27 Python
详解Python使用tensorflow入门指南
2018/02/09 Python
Python标准库使用OrderedDict类的实例讲解
2019/02/14 Python
Python判断两个文件是否相同与两个文本进行相同项筛选的方法
2019/03/01 Python
使用python来调用CAN通讯的DLL实现方法
2019/07/03 Python
python中元组的用法整理
2020/06/15 Python
python实现感知机模型的示例
2020/09/30 Python
Python word文本自动化操作实现方法解析
2020/11/05 Python
爱奇艺VIP会员:大剧抢先看
2018/07/11 全球购物
正风肃纪剖析材料
2014/02/18 职场文书
《花瓣飘香》教学反思
2014/04/15 职场文书
手机被没收的检讨书
2014/10/04 职场文书
525心理健康活动总结
2015/05/08 职场文书
Python爬虫入门案例之回车桌面壁纸网美女图片采集
2021/10/16 Python
win11无法登录onedrive错误代码0x8004def7怎么办 ?
2022/04/05 数码科技