js 实时显示字数
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/jquery-1.10.2.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!-- 在处理textarea之前，首先需知道textarea是不会显示value值的，
如果想显示需要使用js中的方法 $('#textArea').val('123'); -->
<div class="one">
<textarea id="textArea" cols="30" rows="10">测试</textarea>
<span class='two'><span id="textNum">0</span>/100</span>
<!-- 最多100字符，0处显示的是已经写了多少字符 -->
</div>
<script>
$('#textArea').on("keyup",function(){
$('#textNum').text($('#textArea').val().length);//这句是在键盘按下时，实时的显示字数
if($('#textArea').val().length > 100){
$('#textNum').text(100);//长度大于100时0处显示的也只是100
$('#textArea').val($('#textArea').val().substring(0,100));//长度大于100时截取钱100个字符
}
})
$('#textNum').text($('#textArea').val().length);//这句是在刷新的时候仍然显示字数
</script>
</body>
</html>
js 实时显示字数的更多相关文章
- php随笔6-thinkphp OA系统 JS 实时显示当前时间
不多说,直入主题: JS. // JavaScript Document function showtime() { var today,hour,second,minute,year,month,d ...
- js实时显示系统时间
刚刚在做后台页面最上面要动态显示时间刚写了这个代码 将这段代码加入<head></head> <!--时间显示代码 --><script>functio ...
- js实时显示鼠标坐标
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title ...
- input、textArea实时显示剩余可输入的字数
<h2>实时显示剩余可输入的字数(字母,数字,中文都算一个字)</h2> <h>昵称:</h> <div> <input type=& ...
- 使用Uploadify实现上传图片生成缩略图例子,实时显示进度条
不了解Uploadify的,先看看前一篇详细说明 http://www.cnblogs.com/XuebinDing/archive/2012/04/26/2470995.html Uploadify ...
- jquery+ajax 实现text框模糊搜索并可利用listbox实时显示模糊搜索列表结果
功能描述: text框中输入,text框下面的listbox中实时显示依据输入的内容进行模糊搜索的结果 js代码 $j(function() { $j("input[id='txtCos'] ...
- 实时显示数据 SignalR 及时消息提醒（ 立即向其推送内容）
实时显示数据 SignalR 及时消息提醒( 立即向其推送内容) http://www.cnblogs.com/Leo_wl/p/5634910.html <!--Reference the ...
- AngularJS判断checkbox/复选框是否选中并实时显示
最近做了一个选择标签的功能,把一些标签展示给用户,用户选择自己喜欢的标签,就类似我们在购物网站看到的那种过滤标签似的: 简单的效果如图所示: 首先看一下html代码: 1 <!DOCTYPE h ...
- python websocket网页实时显示远程服务器日志信息
功能:用websocket技术,在运维工具的浏览器上实时显示远程服务器上的日志信息 一般我们在运维工具部署环境的时候,需要实时展现部署过程中的信息,或者在浏览器中实时显示程序日志给开发人员看.你还在用 ...
随机推荐
- Jira & SVN & Chrome extensions
Jira & SVN & Chrome extensions Plugins SVN & Jira Plugins ok selector bug document.query ...
- Runtime介绍
本文目录 1.Runtime简介 2.Runtime相关的头文件 3.技术点和应用场景 3_1.获取属性\成员变量列表 3_2.交换方法实现 3_3.类\对象的关联对象,假属性 3_4.动态添加方法, ...
- 安装单机Hadoop系统（完整版）——Mac
在这个阴雨绵绵的下午,没有睡午觉的我带着一双惺忪的眼睛坐在了电脑前,泡上清茶,摸摸已是略显油光的额头(笑cry),,奋斗啊啊啊啊!!%>_<% 1.课程回顾. 1.1 Hadoop系统运行 ...
- 【刷题】BZOJ 2744 [HEOI2012]朋友圈
Description 在很久很久以前,曾经有两个国家和睦相处,无忧无虑的生活着.一年一度的评比大会开始了,作为和平的两国,一个朋友圈数量最多的永远都是最值得他人的尊敬,所以现在就是需要你求朋友圈的最 ...
- [九省联考2018]IIIDX 贪心 线段树
~~~题面~~~ 题解: 一开始翻网上题解看了好久都没看懂,感觉很多人都讲得不太详细,所以导致一些细节的地方看不懂,所以这里就写详细一点吧,如果有不对的or不懂的可以发评论在下面. 首先有一个比较明显 ...
- Android 动画之View动画效果和Activity切换动画效果
View动画效果: 1.>>Tween动画通过对View的内容进行一系列的图形变换(平移.缩放.旋转.透明度变换)实现动画效果,补间动画需要使用<set>节点作为根节点,子节点 ...
- BZOJ4653 & 洛谷1712 & UOJ222：[NOI2016]区间——题解
https://www.lydsy.com/JudgeOnline/problem.php?id=4653 https://www.luogu.org/problemnew/show/P1712 ht ...
- 使用py-faster-rcnn训练VOC2007数据集时遇到问题
使用py-faster-rcnn训练VOC2007数据集时遇到如下问题: 1. KeyError: 'chair' File "/home/sai/py-faster-rcnn/tools/ ...
- 如何给apk文件签名
1.签名的意义 为了保证每个应用程序开发商合法ID,防止部分开放商可能通过使用相同的Package Name来混淆替换已经安装的程序,我们需要对我们发布的APK文件进行唯一签名,保证我们每次发布的版本 ...
- STL之二：vector容器用法详解
转载于:http://blog.csdn.net/longshengguoji/article/details/8507394 vector类称作向量类,它实现了动态数组,用于元素数量变化的对象数组. ...