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中页面返回顶部的方法总结
Dec 30 Javascript
JavaScript之map reduce_动力节点Java学院整理
Jun 29 Javascript
JavaScript数据类型的存储方法详解
Aug 25 Javascript
详解JSONObject和JSONArray区别及基本用法
Oct 25 Javascript
使用watch监听路由变化和watch监听对象的实例
Feb 24 Javascript
JS实现的透明度渐变动画效果示例
Apr 28 Javascript
使用webpack3.0配置webpack-dev-server教程
May 29 Javascript
Vue+Node服务器查询Mongo数据库及页面数据传递操作实例分析
Dec 20 Javascript
Vue中qs插件的使用详解
Feb 07 Javascript
JS实现简易图片自动轮播
Oct 16 Javascript
用JS实现飞机大战小游戏
Jun 09 Javascript
JS数组方法some、every和find的使用详情
Oct 05 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简单开启gzip压缩方法(zlib.output_compression)
2013/04/13 PHP
php+xml编程之xpath的应用实例
2015/01/24 PHP
PHP判断FORM表单或URL参数来的数据是否为整数的方法
2016/03/25 PHP
php中Ioc(控制反转)和Di(依赖注入)
2017/05/07 PHP
dropdownlist之间的互相联动实现(显示与隐藏)
2009/11/24 Javascript
javascript测试题练习代码
2012/10/10 Javascript
JQuery制作的放大效果的popup对话框(未添加任何jquery plugin)分享
2013/04/28 Javascript
JQuery中操作Css样式的方法
2014/02/12 Javascript
javascript封装的sqlite操作类实例
2015/07/17 Javascript
jQuery改变form表单的action,并进行提交的实现代码
2016/05/25 Javascript
javascript时间戳和日期字符串相互转换代码(超简单)
2016/06/22 Javascript
js动态添加的DIV中的onclick事件简单实例
2016/07/25 Javascript
微信小程序获取微信运动步数的实例代码
2017/07/20 Javascript
浅谈微信小程序flex布局基础
2018/09/10 Javascript
vue+element实现打印页面功能
2019/05/20 Javascript
JS中自定义事件的使用与触发操作实例分析
2019/11/01 Javascript
python抓取网页时字符集转换问题处理方案分享
2014/06/19 Python
python BeautifulSoup设置页面编码的方法
2015/04/03 Python
python ddt实现数据驱动
2018/03/14 Python
Django 视图层(view)的使用
2018/11/09 Python
pandas pivot_table() 按日期分多列数据的方法
2018/11/16 Python
python安装virtualenv虚拟环境步骤图文详解
2019/09/18 Python
CSS3属性box-shadow使用详细教程
2012/01/21 HTML / CSS
美国帽子俱乐部商店:Hat Club
2019/07/05 全球购物
香港家用健身器材、运动器材及健康美容仪器专门店:FitBoxx
2019/12/05 全球购物
全球最受追捧的运动服品牌领先数字目的地:Stylerunner
2020/11/25 全球购物
LUISAVIAROMA德国官网:时尚奢侈品牌购物网站
2020/11/12 全球购物
EntityManager都有哪些方法
2013/11/01 面试题
银行柜员应聘推荐信范文
2013/11/24 职场文书
2014年九一八事变演讲稿
2014/09/14 职场文书
乡镇群众路线专项整治方案
2014/11/03 职场文书
后进生评语大全
2015/01/04 职场文书
2015年敬老月活动总结
2015/03/27 职场文书
MongoDB安装使用并实现Python操作数据库
2021/06/28 MongoDB
Python学习之异常中的finally使用详解
2022/03/16 Python
Linux中sftp常用命令整理
2022/06/28 Servers