简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Rumah > hujung hadapan web > tutorial js > teks badan

利用Angular.js限制textarea输入的字数

高洛峰
Lepaskan： 2016-12-09 15:46:24
asal
1202 orang telah melayarinya

前言

大家可能都遇到过在输入的时候做出限制的需求，本文介绍的是通过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>
Salin selepas log masuk

   


Label berkaitan：
angular.js
sumber：php.cn
Artikel sebelumnya：javascript淘宝主图放大镜功能 Artikel seterusnya：一个极为简单的requirejs实现方法
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
angular.js - Bagaimana untuk membina projek rangka kerja angularJS yang lengkap Bagaimana untuk membina projek rangka kerja angularJS yang lengkap, adakah ia membina hala...
daripada 2017-07-04 13:45:00
0
3
1220
angular.js - Sila beritahu saya mengapa html saya memaparkan {{greeting.text}},Angular dan bukannya Hello,Angular Sila beritahu saya mengapa html saya memaparkan {{greeting.text}},Angular dan bukannya Hel...
daripada 2017-07-04 13:44:55
0
4
1184
angular.js - Apakah sebab mengapa permintaan yang sama berlaku dua kali apabila angularjs memulakan permintaan $http get dan cara menyelesaikannya Seperti yang dinyatakan oleh tajuk, apabila angularjs memulakan permintaan dapatkan untuk ...
daripada 2017-07-04 13:44:54
0
3
1374
javascript - Masalah pendakap kerinting berganda {{}} dalam angular.js {Kod...} Seperti yang dikatakan tajuk, dalam kod di atas, saya perlu mendapatkan nilai $in...
daripada 2017-07-04 13:44:52
0
4
1655
angular.js - Bagaimana untuk membina projek angular1 jika alat binaan lain tidak berkenaan Saya mahu membina projek menggunakan angular1+angular-ui-router tulen Saya mengikuti rutin...
daripada 2017-07-04 13:44:42
0
3
877
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！