JavaScript中统计Textarea字数并提示还能输入的字符


Posted in Javascript onJune 10, 2014

现在流行的Twitter等微博客网站,有一个很好的用户体验,就是在文本框中输入文字的时候,会自动统计输入的字符,并显示用户还能输入的字符,在限制了140个字的微博客中,这样的小提示可以很好的增强用户体验。

如果实现这种技术呢,我进行了一些研究,发现实现其实挺简单,几行代码就能完成输入字符统计功能,经过实际测试,其对文字的统计与Twitter等微博客的完全相同。

使用方法是,先增加一个span,用于显示剩余的字数,然后在Textarea中,加入一个onkeydown和onkeyup的事件,调用另一段JavaScript函数,函数调用的参数为span的id和textarea的id,然后再JavaScript中使用innerHTML返回计算出来的剩余字数。

核心Javascript代码:

<span style="font-size:18px;"><script language="javascript"> 

function countChar(textareaName,spanName) 

{ 

document.getElementById(spanName).innerHTML = 140 - document.getElementById(textareaName).value.length; 

} 

</script> 

可以输入<span id="counter">140</span>字<br/> 

<textarea id="status" name="status" rows="6" cols="40" onkeydown='countChar("status","counter");' 

onkeyup='countChar("status","counter");'></textarea></span>

PS:本站还提供了一个关于字数统计的在线工具,感兴趣的朋友可以参考一下:

在线字数统计工具:

Javascript 相关文章推荐
JQuery 无废话系列教程(一) jquery入门 [推荐]
Jun 23 Javascript
js自定义事件及事件交互原理概述(二)
Feb 01 Javascript
javascript将相对路径转绝对路径示例
Mar 14 Javascript
JavaScript实现关键字高亮功能
Nov 12 Javascript
JavaScript基础教程——入门必看篇
May 20 Javascript
select隐藏选中值对应的id,显示其它id的简单实现方法
Aug 25 Javascript
关于定制FileField中的上传文件名称问题
Aug 22 Javascript
ES7中利用Await减少回调嵌套的方法详解
Nov 01 Javascript
jQuery实现仿京东防抖动菜单效果示例
Jul 06 jQuery
jQuery 点击获取验证码按钮及倒计时功能
Sep 20 jQuery
ndm:NPM的桌面GUI应用程序
Oct 15 Javascript
微信小程序 this.triggerEvent()的具体使用
Dec 10 Javascript
iframe里的页面禁止右键事件的方法
Jun 10 #Javascript
js类定义函数时用prototype与不用的区别示例介绍
Jun 10 #Javascript
深入探讨JavaScript、JQuery屏蔽网页鼠标右键菜单及禁止选择复制
Jun 10 #Javascript
js换图片效果可进行定时操作
Jun 09 #Javascript
jQuery如何将选中的对象转化为原始的DOM对象
Jun 09 #Javascript
javascript 处理null及null值示例
Jun 09 #Javascript
网页实时显示服务器时间和javscript自运行时钟
Jun 09 #Javascript
You might like
PHP url 加密解密函数代码
2011/08/26 PHP
使用Huagepage和PGO来提升PHP7的执行性能
2015/11/30 PHP
jQuery 1.5最新版本的改进细节分析
2011/01/19 Javascript
JavaScript高级程序设计 XML、Ajax 学习笔记
2011/09/10 Javascript
JavaScript 中的日期和时间及表示标准介绍
2013/08/21 Javascript
jquery 为a标签绑定click事件示例代码
2014/06/23 Javascript
原生js结合html5制作简易的双色子游戏
2015/03/30 Javascript
JavaScript在Android的WebView中parseInt函数转换不正确问题解决方法
2015/04/25 Javascript
JavaScript中instanceof运算符的使用示例
2016/06/08 Javascript
详细分析Javascript中创建对象的四种方式
2016/08/17 Javascript
详解Angular中$cacheFactory缓存的使用
2016/08/19 Javascript
详解微信小程序 wx.uploadFile 的编码坑
2017/01/23 Javascript
微信小程序 image组件binderror使用例子与js中的onerror区别
2017/02/15 Javascript
浅析Javascript中双等号(==)隐性转换机制
2017/10/27 Javascript
详解Angular调试技巧之报错404(not found)
2018/01/31 Javascript
JavaScript实现求最大公共子串的方法
2018/02/03 Javascript
Angularjs中date过滤器失效的问题及解决方法
2018/07/06 Javascript
详解JavaScript 作用域
2020/07/14 Javascript
浅谈javascript事件环微任务和宏任务队列原理
2020/09/12 Javascript
[01:04:35]2018DOTA2亚洲邀请赛 4.3 突围赛 Secret vs VG 第一场
2018/04/04 DOTA
Python3 伪装浏览器的方法示例
2017/11/23 Python
python实现排序算法解析
2018/09/08 Python
python3使用pandas获取股票数据的方法
2018/12/22 Python
在Python中居然可以定义两个同名通参数的函数
2019/01/31 Python
QML使用Python的函数过程解析
2019/09/26 Python
Python用input输入列表的实例代码
2020/02/07 Python
Python新手如何理解循环加载模块
2020/05/29 Python
python中查看.db文件中表格的名字及表格中的字段操作
2020/07/07 Python
利用CSS3的checked伪类实现OL的隐藏显示的方法
2010/12/18 HTML / CSS
LivingSocial爱尔兰:爱尔兰本地优惠
2018/08/10 全球购物
房产公证书范本
2014/04/10 职场文书
爱护花草树木的标语
2014/06/11 职场文书
乡镇党员干部群众路线对照检查材料思想汇报
2014/09/28 职场文书
店长岗位职责
2015/02/11 职场文书
大学生团日活动总结
2015/05/06 职场文书
Python竟然能剪辑视频
2021/05/25 Python