利用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实现的跟随鼠标移动的时钟效果(中英文日期显示)
Jan 17 Javascript
javascript权威指南 学习笔记之javascript数据类型
Sep 24 Javascript
JavaScript window.document的属性、方法和事件小结
Oct 24 Javascript
js不能获取隐藏的div的宽度只能先显示后获取
Sep 04 Javascript
使用jQuery实现WordPress中的Ctrl+Enter和@评论回复
May 21 Javascript
JavaScript获取URL中参数querystring的方法详解
Oct 11 Javascript
详解JavaScript中return的用法
May 08 Javascript
详解Angular路由 ng-route和ui-router的区别
May 22 Javascript
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
May 26 jQuery
详解如何在微信小程序中愉快地使用sass
Jul 30 Javascript
vue中组件的3种使用方式详解
Mar 23 Javascript
Vue router传递参数并解决刷新页面参数丢失问题
Dec 02 Vue.js
一个极为简单的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
建立动态的WML站点(三)
2006/10/09 PHP
asp和php下textarea提交大量数据发生丢失的解决方法
2008/01/20 PHP
php+mysql实现无限级分类
2015/11/11 PHP
php编程每天必学之验证码
2016/03/03 PHP
PHP魔术方法之__call与__callStatic使用方法
2017/07/23 PHP
php表单文件iframe异步上传实例讲解
2017/07/26 PHP
基于JQuery的一个简单的鼠标跟随提示效果
2010/09/23 Javascript
JQuery扩展插件Validate—4设置错误提示的样式
2011/09/05 Javascript
多种方法实现360浏览器下禁止自动填写用户名密码
2014/06/16 Javascript
如何解决easyui自定义标签 datagrid edit combobox 手动输入保存不上
2015/12/26 Javascript
js获取新浪天气接口的实现代码
2016/06/06 Javascript
浅谈jquery选择器 :first与:first-child的区别
2016/11/20 Javascript
微信小程序非swiper组件实现的自定义伪3D轮播图效果示例
2018/12/11 Javascript
Node.js Stream ondata触发时机与顺序的探索
2019/03/08 Javascript
Webpack 4如何动态切割JS注入文件名详解
2019/07/09 Javascript
详解vuex数据传输的两种方式及this.$store undefined的解决办法
2019/08/26 Javascript
浅谈js中的attributes和Attribute的用法与区别
2020/07/16 Javascript
Python获取文件ssdeep值的方法
2014/10/05 Python
Python基于递归算法实现的走迷宫问题
2017/08/04 Python
Python 实现淘宝秒杀的示例代码
2018/01/02 Python
使用python爬虫获取黄金价格的核心代码
2018/06/13 Python
Python登录注册验证功能实现
2018/06/18 Python
在django中自定义字段Field详解
2019/12/03 Python
使用python的pyplot绘制函数实例
2020/02/13 Python
Python下载的11种姿势(小结)
2020/11/18 Python
Python控制鼠标键盘代码实例
2020/12/08 Python
推荐一些比较有用的css3新属性
2014/11/11 HTML / CSS
html5移动端价格输入键盘的实现
2019/09/16 HTML / CSS
中东地区为妈妈们提供一切的头号购物目的地:Sprii
2018/05/06 全球购物
意大利独特而优质的家居用品:Fazzini
2018/12/05 全球购物
实现strstr功能,即在父串中寻找子串首次出现的位置
2016/08/05 面试题
奥巴马演讲稿
2014/01/08 职场文书
趣味运动会活动方案
2014/02/12 职场文书
2014年医院个人工作总结
2014/12/09 职场文书
2015出纳试用期工作总结
2014/12/12 职场文书
好员工观后感
2015/06/17 职场文书