利用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入门教程(11) js事件处理
Jan 31 Javascript
Javascript学习笔记9 prototype封装继承
Jan 11 Javascript
js报错 Object doesn't support this property or method的原因分析
Mar 31 Javascript
在Ubuntu上安装最新版本的Node.js
Jul 14 Javascript
js控制div弹出层实现方法
May 11 Javascript
AngularJS实现表单手动验证和表单自动验证
Dec 09 Javascript
JS原型、原型链深入理解
Feb 27 Javascript
深入理解jQuery layui分页控件的使用
Aug 17 Javascript
canvas绘制一个常用的emoji表情
Mar 30 Javascript
jQuery实现页码跳转式动态数据分页
Dec 31 jQuery
Vue通过ref父子组件拿值方法
Sep 12 Javascript
JS三级联动代码格式实例详解
Dec 30 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设计模式 Singleton(单例模式)
2011/06/26 PHP
win2003服务器使用WPS的COM组件的一些问题解决方法
2012/01/11 PHP
PHP整数取余返回负数的相关解决方法
2014/05/15 PHP
php写的AES加密解密类分享
2014/06/20 PHP
编写PHP脚本清除WordPress头部冗余代码的方法讲解
2016/03/01 PHP
php过滤输入操作之htmlentities与htmlspecialchars用法分析
2017/02/17 PHP
ThinkPHP框架实现的邮箱激活功能示例
2018/06/15 PHP
利用js制作html table分页示例(js实现分页)
2014/04/25 Javascript
json对象转为字符串,当做参数传递时加密解密的实现方法
2016/06/29 Javascript
Javascript之面向对象--接口
2016/12/02 Javascript
Vue.js学习之过滤器详解
2017/01/22 Javascript
利用ECharts.js画K线图的方法示例
2018/01/10 Javascript
详解JavaScript 中 if / if...else...替换方式
2018/07/15 Javascript
微信小程序自定义tabBar组件开发详解
2020/09/24 Javascript
详解vue使用$http服务端收不到参数
2019/04/19 Javascript
sortable+element 实现表格行拖拽的方法示例
2019/06/07 Javascript
用Node写一条配置环境的指令
2019/11/14 Javascript
Ant Design Pro 下实现文件下载的实现代码
2019/12/03 Javascript
JavaScript 空间坐标的使用
2020/08/19 Javascript
从零学python系列之新版本导入httplib模块报ImportError解决方案
2014/05/23 Python
详解Python发送邮件实例
2016/01/10 Python
redis之django-redis的简单缓存使用
2018/06/07 Python
对CSS3选择器的研究(详解)
2016/09/16 HTML / CSS
雅诗兰黛香港官网:Estee Lauder香港
2017/09/26 全球购物
SHEIN台湾:购买最新流行女装服饰
2019/05/18 全球购物
丝芙兰意大利官方网站:Sephora.it
2019/12/13 全球购物
专升本自我鉴定
2013/10/10 职场文书
民警个人对照检查剖析材料
2014/09/17 职场文书
2014年大学生社会实践自我鉴定
2014/09/26 职场文书
党性分析自查总结
2014/10/14 职场文书
幼儿园春季开学通知
2015/07/16 职场文书
小学教师教学随笔
2015/08/14 职场文书
mysql死锁和分库分表问题详解
2021/04/16 MySQL
CSS3实现的侧滑菜单
2021/04/27 HTML / CSS
Python机器学习之基础概述
2021/05/19 Python
xhunter1.sys可以删除嘛? win11提示xhunter1.sys驱动不兼容解决办法
2022/09/23 数码科技