利用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 Global对象
Aug 13 Javascript
Jquery中显示隐藏的实现代码分析
Jul 26 Javascript
常见JS效果之图片减速度滚动实现代码
Dec 08 Javascript
js工具方法弹出蒙版
May 08 Javascript
解析javascript 浏览器关闭事件
Jul 08 Javascript
深入理解JavaScript系列(25):设计模式之单例模式详解
Mar 03 Javascript
AngularJS 单选框及多选框的双向动态绑定
Apr 20 Javascript
axios简单实现小程序延时loading指示
Jul 30 Javascript
Vue常用指令详解分析
Aug 19 Javascript
Vue.set 全局操作简单示例
Sep 19 Javascript
Vue路由 重定向和别名的区别说明
Sep 09 Javascript
VUE解决跨域问题Access to XMLHttpRequest at
May 06 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
PHP.MVC的模板标签系统(二)
2006/09/05 PHP
PHP 反向排序和随机排序代码
2010/06/30 PHP
php中3种方法统计字符串中每种字符的个数并排序
2012/08/27 PHP
php笔记之:AOP的应用
2013/04/24 PHP
使用php判断网页是否gzip压缩
2013/06/25 PHP
ThinkPHP中关联查询实例
2014/12/02 PHP
php_imagick实现图片剪切、旋转、锐化、减色或增加特效的方法
2014/12/15 PHP
[原创]php简单隔行变色功能实现代码
2016/07/09 PHP
js tab效果的实现代码
2009/12/26 Javascript
js读写(删除)Cookie实例详解
2013/04/17 Javascript
如何判断微信内置浏览器(通过User Agent实现)
2014/09/01 Javascript
jquery获取url参数及url加参数的方法
2015/10/26 Javascript
javascript简单比较日期大小的方法
2016/01/05 Javascript
无需 Flash 使用 jQuery 复制文字到剪贴板
2016/04/26 Javascript
js判断iframe中元素是否存在的实现代码
2016/12/24 Javascript
JavaScript简介_动力节点Java学院整理
2017/06/26 Javascript
微信小程序的日期选择器的实例详解
2017/09/29 Javascript
使用Bootstrap4 + Vue2实现分页查询的示例代码
2017/12/21 Javascript
JavaScript时间日期操作实例小结【5个示例】
2018/12/22 Javascript
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
2020/02/04 jQuery
Python3结合Dlib实现人脸识别和剪切
2018/01/24 Python
Python之使用adb shell命令启动应用的方法详解
2019/01/07 Python
Pandas读写CSV文件的方法示例
2019/03/27 Python
python matplotlib库直方图绘制详解
2019/08/10 Python
Python搭建HTTP服务过程图解
2019/12/14 Python
简单了解Django ORM常用字段类型及参数配置
2020/01/07 Python
20行Python代码实现视频字符化功能
2020/04/13 Python
详解python3类型注释annotations实用案例
2021/01/20 Python
Pandas数据分析的一些常用小技巧
2021/02/07 Python
SQL语言面试题
2013/08/27 面试题
文员岗位职责
2013/11/09 职场文书
仓库理货员岗位职责
2013/12/18 职场文书
初中化学教学反思
2014/01/23 职场文书
大专毕业自我鉴定
2014/02/04 职场文书
有关环保的标语
2014/06/13 职场文书
2016七夕情人节广告语
2016/01/28 职场文书