利用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>

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。

赞 (0)

相关推荐

  • jquery实现textarea输入框限制字数的方法

    本文实例讲述了jquery实现textarea输入框限制字数的方法.分享给大家供大家参考.具体分析如下: 网上有使用属性 disabled 来实现,这个不好,想修改都没有修改.当然,这个也不是很完美. 复制代码 代码如下: <html> <head> <title> jquery完美实现textarea输入框限制字数</title> <meta http-equiv="content-type" content="text

  • jQuery编写textarea输入字数限制代码

    本文实例为大家分享了jQuery textarea输入字数限制的具体代码,供大家参考,具体内容如下 //先判断浏览器是不是万恶的IE var bind_name = 'input';//默认事件 if (navigator.userAgent.indexOf("MSIE") != -1) { bind_name = 'propertychange';//不要脸IE独享的事件 } var maxlength = 10;//限定输入字数 $('#Comment').bind(bind_na

  • JS控制文本框textarea输入字数限制的方法

    复制代码 代码如下: <html>     <head>     <title>JS限制Textarea文本域字符个数</title>     <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />     <SCRIPT LANGUAGE="JavaScript">     <!--

  • Textarea输入字数限制实例(兼容iOS&安卓)

    最近在做一个微信公众号的页面,其中有对textarea做输入字数限制,而且需要兼容iOS和安卓手机, 下面直接贴代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>textarea输入字数限制(兼容ios和安卓)</title> </head> <body> <!-- 最

  • js实现textarea限制输入字数

    实现textarea限制输入字数(包含中文只能输入10个,全ASCII码能够输入20个) textarea称文本域,又称文本区,即有滚动条的多行文本输入控件,在网页的提交表单中经常用到.与单行文本框text控件不同,它不能通过maxlength属性来限制字数,为此必须寻求其他方法来加以限制以达到预设的需求. 通常的做法就是使用#脚本语言来实现对textarea文本域的字数输入限制,简单而实用.假设我们有一个id为 txta1 的textarea文本区,我们可以通过以下代码限制它的键盘输入字数为1

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

    前言 大家可能都遇到过在输入的时候做出限制的需求,本文介绍的是通过Angular.js限制textarea输入字数的方法,有需要的朋友们可以参考以下实例. 实例代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>AngularJS 简单应用程序--输入字数限制</title> <!-- @author:sm @email:sm0

  • 利用Angular.js编写公共提示模块的方法教程

    利用Angular.js编写公共提示模块的方法教程

    前言 在编写一些大型工程的时候,会经常遇到一些公用提示,使用框架自带很多时候不方便,于是我手写了一个,下面来看看详细的介绍: 效果图如下 方法如下 一.先在angular中注册一个模块 二. 注册一个模块 注入依赖 三. 返回不同的方法应对不同情况 四. 获取模板路径 五. 编写模板内容 和普通的页面一样调用使用angular服务 六. 1. 开启http服务获取模板内容 2.  重点注意 $template = $compile(template)(scope); 这句代码非常重要  用于激活

  • jquery实现限制textarea输入字数的方法

    jquery怎么实现限制textarea输入的字数呢?有需要的朋友可以参考一下我写的例子,当然如果有误,也希望大家能及时指出来,大家共同学习进步. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>textarea 限制字数</title> <style> .container{ positio

  • 浅析如何利用angular结合translate为项目实现国际化

    浅析如何利用angular结合translate为项目实现国际化

    前言 利用H5项目第一版本已经上线,话说有了第一期就有了第二期,这不要为第二期做准备了,老大发话第一件事就要利用Angular JS实现项目的国际化以及后续要借助这个框架来实现其他功能,好吧我表示没怎么接触过,这一个礼拜自己也对Angular基本的用法已经有了初步的了解以及熟悉,于是乎就有了这篇文章的产生.其实没我什么事,我也是主动请缨说交给我,因为年底了嘛,也没什么事,不急不忙的,一天也乐得清闲,还不给自己找点事做,而且还能在做的过程中能学到东西,何乐而不为呢!Angular已盛行一时,但请恕

  • angular.js + require.js构建模块化单页面应用的方法步骤

    angular.js + require.js构建模块化单页面应用的方法步骤

    前言 本文主要给大家介绍的是关于利用angular.js + require.js构建模块化单页面应用的方法,分享出来供大家参考学习,需要的朋友们下面来一起看看详细的介绍吧. AngularJS描述: angularjs是可以用来构建WEB应用的,WEB应用中的一种端对端的完整解决方案.通过开发者呈现一个更高层次的抽象来简化应用的开发.最适合的就是用它来构建一个CRUD应用,它提供了非常方便的且统一高效的解决方案,其数据绑定.基本模版标识符.表单验证.路由.深度链接.组件重用.依赖注入.以及HT

  • 基于JS实现textarea中获取动态剩余字数的方法

    案例介绍:我们常见到有的网站有textarea文本框,当你输入的时候,下面有文字提示还能输入多少个字,今天就是要实现这个功能.当然,由于一个页面有好几个textarea,所以使用单个js逻辑进行控制是不行的,得小小的进行封装一下.当然我的封装还有缺漏,但是基本功能是实现了. 首先介绍下单个textarea实现案例 html部分: <textarea id="text_txt1"></textarea> <span id ="num_txt1&qu

  • js实现控制textarea输入字符串的个数,鼠标按下抬起判断输入字符数

    [Html代码] <table> <tr> <td width="150">短信内容:</td> <td> <textarea name="message" cols="96" rows="5" onKeyDown="textCounter(message,remLen,65);" onKeyUp="textCounter(mess

随机推荐