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实现特定位取反原理及示例
Jun 30 Javascript
JS获取当前脚本文件的绝对路径
Mar 02 Javascript
AngularJS ng-style中使用filter
Sep 21 Javascript
文件上传,iframe跨域数据提交的实现
Nov 18 Javascript
js实现移动端编辑添加地址【模仿京东】
Apr 28 Javascript
高性能的javascript之加载顺序与执行原理篇
Jan 14 Javascript
在vue项目中使用element-ui的Upload上传组件的示例
Feb 08 Javascript
理解 JavaScript EventEmitter
Mar 29 Javascript
Javascript中绑定click事件的四种方式介绍
Oct 26 Javascript
微信小程序里引入SVG矢量图标的方法
Sep 20 Javascript
vue v-model的用法解析
Oct 19 Javascript
四十九个javascript小知识实用技巧
Nov 20 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
thinkphp备份数据库的方法分享
2015/01/04 PHP
PHP合并数组+号和array_merge的区别
2015/06/25 PHP
php图片添加文字水印实现代码
2016/03/15 PHP
用js遍历 table的脚本
2008/07/23 Javascript
基于JQuery的抓取博客园首页RSS的代码
2011/12/01 Javascript
JSON.stringify 语法实例讲解
2012/03/14 Javascript
extjs tabpanel限制选项卡数量实现思路及代码
2013/04/02 Javascript
JavaScript中的函数声明和函数表达式区别浅析
2015/03/27 Javascript
javascript实现淘宝幻灯片广告展示效果
2015/04/27 Javascript
JavaScript的ExtJS框架中数面板TreePanel的使用实例解析
2016/05/21 Javascript
AJAX实现瀑布流触发分页与分页触发瀑布流的方法
2016/05/23 Javascript
JavaScript获取短信验证码(周期性)
2016/12/29 Javascript
利用JS实现文字的聚合动画效果
2017/01/22 Javascript
jQuery animate()实现背景色渐变效果的处理方法【使用jQuery.color.js插件】
2017/03/15 Javascript
通过示例彻底搞懂js闭包
2017/08/10 Javascript
babel之配置文件.babelrc入门详解
2018/02/22 Javascript
Vue CLI3搭建的项目中路径相关问题的解决
2018/09/17 Javascript
react 应用多入口配置及实践总结
2018/10/17 Javascript
[06:33]DOTA2亚洲邀请赛小组赛第二日 TOP10精彩集锦
2015/01/31 DOTA
Python的Django框架中自定义模版标签的示例
2015/07/20 Python
python Django模板的使用方法
2016/01/14 Python
Python3基于sax解析xml操作示例
2018/05/22 Python
Python开发的十个小贴士和技巧及长常犯错误
2018/09/27 Python
python中文分词库jieba使用方法详解
2020/02/11 Python
利用Python实现斐波那契数列的方法实例
2020/07/26 Python
Python面向对象特殊属性及方法解析
2020/09/16 Python
html5嵌入内容_动力节点Java学院整理
2017/07/07 HTML / CSS
反腐倡廉演讲稿
2014/05/22 职场文书
服务标语口号
2014/07/01 职场文书
教师党的群众路线对照检查材料
2014/09/24 职场文书
幼儿园感恩节活动方案
2014/10/06 职场文书
加强作风建设工作总结
2014/10/23 职场文书
2015纪念九一八事变84周年演讲稿
2015/03/19 职场文书
详解TS数字分隔符和更严格的类属性检查
2021/05/06 Javascript
python数据可视化使用pyfinance分析证券收益示例详解
2021/11/20 Python
阿里云k8s服务升级时502错误 springboot项目应用
2022/04/09 Servers