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 相关文章推荐
js和jquery设置disabled属性为true使按钮失效
Aug 07 Javascript
javascript使用window.open提示“已经计划系统关机”的原因
Aug 15 Javascript
JS基于cookie实现来宾统计记录访客信息的方法
Aug 04 Javascript
学习JavaScript设计模式(代理模式)
Dec 03 Javascript
全面解析Javascript无限添加QQ好友原理
Jun 15 Javascript
es6学习笔记之Async函数基本教程
May 11 Javascript
在Vue组件化中利用axios处理ajax请求的使用方法
Aug 25 Javascript
vue引用js文件的多种方式(推荐)
May 17 Javascript
微信小程序入门之广告条实现方法示例
Dec 05 Javascript
详解React项目如何修改打包地址(编译输出文件地址)
Mar 21 Javascript
详解vue.js移动端配置flexible.js及注意事项
Apr 10 Javascript
node.js使用express-fileupload中间件实现文件上传
Jul 16 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 中的输出缓冲
2006/12/21 PHP
PHP 快速排序算法详解
2014/11/10 PHP
PHP制作万年历
2015/01/07 PHP
求解开jscript.encode代码的asp函数
2007/02/28 Javascript
jquery cookie插件代码类
2009/05/26 Javascript
javascript中window.event事件用法详解
2012/12/11 Javascript
JQuery实现用户名无刷新验证的小例子
2013/03/22 Javascript
jQuery仿gmail实现fixed布局的方法
2015/05/27 Javascript
JavaScript中this详解
2015/09/01 Javascript
Java Mybatis框架入门基础教程
2015/09/21 Javascript
基于HTML+CSS+JS实现增加删除修改tab导航特效代码
2016/08/05 Javascript
JavaScript中自带的 reduce()方法使用示例详解
2016/08/10 Javascript
jquery实现输入框实时输入触发事件代码
2016/12/21 Javascript
setTimeout函数的神奇使用
2017/02/26 Javascript
JavaScript实现自动跳转文本功能
2017/05/25 Javascript
微信小程序日历组件calendar详解及实例
2017/06/08 Javascript
JavaScript 用fetch 实现异步下载文件功能
2017/07/21 Javascript
JavaScript30 一个月纯 JS 挑战中文指南(英文全集)
2017/07/23 Javascript
js判断输入框不能为空格或null值的实现方法
2018/03/02 Javascript
vue内置指令详解
2018/04/03 Javascript
基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)
2019/04/04 Javascript
js 动态校验开始结束时间的实现代码
2020/05/25 Javascript
[05:36]DOTA2 2015国际邀请赛中国区预选赛第四日TOP10
2015/05/29 DOTA
浅谈pycharm出现卡顿的解决方法
2018/12/03 Python
Python小游戏之300行代码实现俄罗斯方块
2019/01/04 Python
利用python、tensorflow、opencv、pyqt5实现人脸实时签到系统
2019/09/25 Python
css3 伪类选择器快速复习小结
2019/09/10 HTML / CSS
Elemental Herbology官网:英国美容品牌
2019/04/27 全球购物
餐饮总经理岗位职责
2014/03/07 职场文书
销售团队获奖感言
2014/08/14 职场文书
纪念九一八事变演讲稿1000字
2014/09/14 职场文书
生产操作工岗位职责
2014/09/16 职场文书
2014年导购员工作总结
2014/11/18 职场文书
大雁塔导游词
2015/02/04 职场文书
Nginx配置80端口访问8080及项目名地址方法解析
2021/03/31 Servers
【D4DJ】美少女DJ企划 动画将于明年冬季开播第2季
2022/04/11 日漫