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 相关文章推荐
你真的了解JavaScript吗?
Feb 24 Javascript
深入理解JavaScript系列(16) 闭包(Closures)
Apr 12 Javascript
node.js中的fs.lchownSync方法使用说明
Dec 16 Javascript
JS代码随机生成姓名、手机号、身份证号、银行卡号
Apr 27 Javascript
深入理解setTimeout函数和setInterval函数
May 20 Javascript
vue-cli的eslint相关用法
Sep 29 Javascript
JavaScript中错误正确处理方式小结你用对了吗
Oct 10 Javascript
360doc网站不登录就无法复制内容的解决方法
Jan 27 Javascript
JavaScript中严格判断NaN的方法
Feb 16 Javascript
node下使用UglifyJS压缩合并JS文件的方法
Mar 07 Javascript
中高级前端必须了解的JS中的内存管理(推荐)
Jul 04 Javascript
微信小程序自定义头部导航栏和导航栏背景图片 navigationStyle问题
Jul 26 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
这东西价格,可以买几台TECSUN S-2000
2021/03/02 无线电
一个没有MYSQL数据库支持的简易留言本的编写
2006/10/09 PHP
下载文件的点击数回填
2006/10/09 PHP
第四节--构造函数和析构函数
2006/11/16 PHP
PHP之数组学习
2011/05/29 PHP
在PHP上显示JFreechart画的统计图方法
2013/11/03 PHP
回帖脱衣服的图片实现代码
2014/02/15 PHP
php通过ajax实现双击table修改内容
2014/04/28 PHP
php+mysql实现用户注册登陆的方法
2015/01/03 PHP
php中使用session防止用户非法登录后台的方法
2015/01/27 PHP
PHP通过串口实现发送短信
2015/07/08 PHP
PHP版微信第三方实现一键登录及获取用户信息的方法
2016/10/14 PHP
PHP实现双链表删除与插入节点的方法示例
2017/11/11 PHP
ExtJS Store的数据访问与更新问题
2010/04/28 Javascript
Extjs407 getValue()和getRawValue()区别介绍
2013/05/21 Javascript
jQuery动态效果显示人物结构关系图的方法
2015/05/07 Javascript
Html5+jQuery+CSS制作相册小记录
2016/12/30 Javascript
js调用刷新界面的几种方式
2017/05/03 Javascript
jQuery实现table中两列CheckBox只能选中一个的示例
2017/09/22 jQuery
vue项目中引入vue-datepicker插件的详解
2019/05/14 Javascript
js实现拾色器插件(ColorPicker)
2020/05/21 Javascript
使用pandas对矢量化数据进行替换处理的方法
2018/04/11 Python
Python+OpenCV+pyQt5录制双目摄像头视频的实例
2019/06/28 Python
Python3自动生成MySQL数据字典的markdown文本的实现
2020/05/07 Python
CSS3 仿微信聊天小气泡实例代码
2017/04/05 HTML / CSS
写一个在SQL Server创建表的SQL语句
2012/03/10 面试题
内刊编辑求职自荐书范文
2014/02/19 职场文书
捐献物资倡议书范文
2014/05/19 职场文书
敬老院献爱心活动总结
2014/07/08 职场文书
诚实守信演讲稿
2014/09/01 职场文书
岳麓书院导游词
2015/02/03 职场文书
2015年会计人员工作总结
2015/05/22 职场文书
2016年三八节红领巾广播稿
2015/12/17 职场文书
Python re.sub 反向引用的实现
2021/07/07 Python
Logback 使用TurboFilter实现日志级别等内容的动态修改操作
2021/08/30 Java/Android
Python中的tkinter库简单案例详解
2022/01/22 Python