angularjs textarea 剩余字数统计
写页面的过程中用到了textarea的文本域,就突然想起他也可以加上剩余字数统计的这个功能。
第一个思路:
根据键盘按键按下去触发一个方法计数:
<textarea cols="50" rows="10" maxlength="100" title="只能输入100个字" ng-model="text" ng-change="tolCount()"></textarea>
<p>还可输入{{count}}个字</p>
效果图:
注意:这个是不需要用到js的,所说可以统计,但是存在很大的弊端,只要键盘按下,就计数了,比如说你按了删除键,他也计数了;并且,如果你是复制粘贴在textarea上的,并没有计数。
第二个思路:根据输入的内容长度计算剩余的字数:
html部分:
<!DOCTYPE html>
<html ng-app="App">
<head >
<title>文本域字数限制</title>
</head>
<body ng-controller="testCtrl">
<textarea cols="50" rows="10" maxlength="100" title="只能输入100个字" ng-model="text" ng-change="tolCount()"></textarea>
<p>还可输入{{count}}个字</p>
</body>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="test.js"></script>
</html>
js部分:
var app = angular.module('App', []);
app.controller('testCtrl', function($scope) {
$scope.count = 100;
$scope.tolCount = function () {
console.log($scope.text.length);
$scope.count = 100 - $scope.text.length;
};
});
效果图:
转载于:https://www.cnblogs.com/ryt103114/p/6377917.html
angularjs textarea 剩余字数统计相关推荐
- textArea剩余字数统计插件
效果如: js代码: /*** textArea字数统计* * Created on : 2015-6-26, 11:49:24* Author : tom lyl010991@126.com*/ v ...
- textarea还剩余字数统计
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- element ui实现动态显示textarea剩余字数
<el-form-item label="备注:" class="layout"><el-input type="textarea& ...
- textarea输入框实时 统计字数(可统计中文,英文字数)
textarea输入框实时 统计字数(可统计中文,英文字数) 效果图如下所示: html部分: <textarea name="des" id="" ro ...
- element ui textarea实现输入字数统计
背景 最近看同行设计,input textarea如果限制字符,可以展示已输入多少个字符,总共限制多少个字符.觉得这个设计挺好,看了一下element官方文档,也可以这么实现. 具体实现 maxlen ...
- html右下角的字数计算,JavaScript_用JS剩余字数计算的代码,先看看HTML代码: textarea name - phpStudy...
用JS剩余字数计算的代码 先看看HTML代码: 文字最大长度: 250. 还剩: 250. 可以看出onkeyup是当用户离开键盘后触发的事件,传递的参数是this(也就是当前所在的文档区域) 然后结 ...
- 文本框输入还剩多少字数统计代码
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- 前端中文输入法对剩余字数计算的影响
背景 前端开发中往往有如下需求限制前端文本框(textfield,input,textarea,div)等的输入字数,可以参考新浪微博.但是这里有个问题,当我们使用中文输入法的时候,我们输入zhesh ...
- 新浪微博长链接字数统计问题
最近发现公司系统中调用api发布的微博字数统计和新浪微博中的字数统计不一致,原来是链接的问题. 新浪微博的字数统计是一个长链接不管多长,统一记成10个字(其他:中文字符为一个长度,英文.数字.标点符号 ...
- php js显示文字个数,JS实现字数统计的功能
现在流行的Twitter等微博客网站,有一个很好的用户体验,就是在文本框中输入文字的时候,会自动统计输入的字符,并显示用户还能输入的字符,在限制了140个字的微博客中,这样的小提示可以很好的增强用户体 ...
最新文章
- 基于USR-WiFi模块的 ESP32,ESP8266 Thonny调试器
- ClickHouse分布式集群部署
- Redux的全家桶与最佳实践
- 分享一个串口调试工具
- java创新_Java没有创新了吗?Java 13提供可提高生产率和效率的功能
- Python-Socket-Programming(1)
- c语言烟花表白程序代码,表白神器-七彩烟花源码
- NAS个人云存储服务器搭建
- Unity UI 动画 工具
- 微信小程序云函数请求接口
- Web在线聊天室(6) --- login登录接口
- 程序界的高手传奇(转)
- 基于Problem Solving with Algorithms and Data Structures using Python的学习记录(4)——Recursion
- C1认证学习十一(常用网络命令以及端口)
- 常见的BlockingQueue有哪些
- python3 安装urllib3
- HTML表格标签(table)
- idea右键项目找不到show dependencies
- JDK11 API 帮助文档下载【中文版】
- hnust 可口可乐大促销