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 精粹读书笔记(1,2)
Feb 07 Javascript
JavaScript CSS修改学习第五章 给“上传”添加样式
Feb 19 Javascript
javascript函数声明和函数表达式区别分析
Dec 02 Javascript
jQuery中map()方法用法实例
Jan 06 Javascript
jquery实现炫酷的叠加层自动切换特效
Feb 01 Javascript
jQuery实现为图片添加镜头放大效果的方法
Jun 25 Javascript
跟我学习javascript的for循环和for...in循环
Nov 18 Javascript
详解js的延迟对象、跨域、模板引擎、弹出层、AJAX【附实例下载】
Dec 19 Javascript
JavaScript实现星星等级评价功能
Mar 22 Javascript
一篇文章让你彻底弄懂JS的事件冒泡和事件捕获
Aug 14 Javascript
vue移动端城市三级联动组件使用详解
Jul 26 Javascript
JS实现扫雷项目总结
May 19 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
全国FM电台频率大全 - 14 江西省
2020/03/11 无线电
PHP环境搭建(php+Apache+mysql)
2016/11/14 PHP
Redis构建分布式锁
2017/03/28 PHP
PHP验证码无法显示的原因及解决办法
2017/08/11 PHP
php 删除一维数组中某一个值元素的操作方法
2018/02/01 PHP
PHP自定义错误处理的方法分析
2018/12/19 PHP
Javascript 二维数组
2009/11/26 Javascript
html组件不可输入(只读)同时任何组件都有效
2013/04/01 Javascript
window.location.href的用法(动态输出跳转)
2014/08/09 Javascript
Vue.js每天必学之指令系统与自定义指令
2016/09/07 Javascript
jQuery实现的仿百度,仿谷歌搜索下拉框效果示例
2016/12/30 Javascript
jquery实现手机端单店铺购物车结算删除功能
2017/02/22 Javascript
JavaScript中防止微信浏览器被整体拖动的方法
2017/08/25 Javascript
Three.js利用dat.GUI如何简化试验流程详解
2017/09/26 Javascript
webpack写jquery插件的环境配置
2017/12/21 jQuery
js登录滑动验证的实现(不滑动无法登陆)
2018/01/03 Javascript
Vue中如何实现proxy代理
2018/04/20 Javascript
详解vue 自定义组件使用v-model 及探究其中原理
2019/10/11 Javascript
在vant中使用时间选择器和popup弹出层的操作
2020/11/04 Javascript
Python中有趣在__call__函数
2015/06/21 Python
从源码解析Python的Flask框架中request对象的用法
2016/06/02 Python
Python实现Smtplib发送带有各种附件的邮件实例
2017/06/05 Python
更新pip3与pyttsx3文字语音转换的实现方法
2019/08/08 Python
对python中的os.getpid()和os.fork()函数详解
2019/08/08 Python
python连接、操作mongodb数据库的方法实例详解
2019/09/11 Python
django 中使用DateTime常用的时间查询方式
2019/12/03 Python
对tensorflow 中tile函数的使用详解
2020/02/07 Python
浅谈tensorflow中dataset.shuffle和dataset.batch dataset.repeat注意点
2020/06/08 Python
python中如何设置代码自动提示
2020/07/15 Python
html5 Canvas画图教程(1)—画图的基本常识
2013/01/09 HTML / CSS
早晨薰衣草在线女性精品店:Morning Lavender
2021/01/04 全球购物
安全生产月标语
2014/10/07 职场文书
2014年宣传工作总结
2014/11/18 职场文书
警告通知
2015/04/25 职场文书
2015年试用期工作总结范文
2015/05/28 职场文书
《牧场之国》教学反思
2016/02/22 职场文书