利用Angular.js限制textarea输入的字数
2019/6/27 21:42:06
本文主要是介绍利用Angular.js限制textarea输入的字数,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
前言
大家可能都遇到过在输入的时候做出限制的需求,本文介绍的是通过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>
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。
这篇关于利用Angular.js限制textarea输入的字数的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-30React Native常用组件-点击组件
- 2024-05-30uniapp+vue3+uv-ui手机端后台OA管理模板
- 2024-05-29Python网络爬虫的时候json=就是让你少写个json.dumps()
- 2024-05-27React Native常用组件-展示组件
- 2024-05-27React Native常用组件-列表组件
- 2024-05-09vue3开发前端表单缓存自定义指令,移动端h5必备插件
- 2024-05-09React Hooks在class组件中的使用方式
- 2024-03-30[OIDC in Action] 2. 基于OIDC(OpenID Connect)的SSO(纯JS客户端)
- 2024-03-29terraform jsonencode
- 2024-03-13vuex-persist