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 动态添加事件代码
Nov 30 Javascript
JavaScript Object的extend是一个常用的功能
Dec 02 Javascript
从URL中提取参数与将对象转换为URL查询参数的实现代码
Jan 12 Javascript
HTML复选框和单选框 checkbox和radio事件介绍
Dec 12 Javascript
详解JavaScript语法对{}处理的坑爹之处
Jun 05 Javascript
js实现(全选)多选按钮的方法【附实例】
Mar 30 Javascript
创建一般js对象的几种方式
Jan 19 Javascript
浅谈Vuex@2.3.0 中的 state 支持函数申明
Nov 22 Javascript
浅谈ajax在jquery中的请求和servlet中的响应
Jan 22 jQuery
JS原生带缩略图的图片切换效果
Oct 10 Javascript
在layui中对table中的数据进行判断(0、1)转换为提示信息的方法
Sep 28 Javascript
基于vue hash模式微信分享#号的解决
Sep 07 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实现的json类实例
2015/07/28 PHP
详解PHP处理字符串类似indexof的方法函数
2017/06/11 PHP
PHP使用redis位图bitMap 实现签到功能
2019/10/08 PHP
使用laravel和ECharts实现折线图效果的例子
2019/10/09 PHP
DOM和XMLHttpRequest对象的属性和方法整理
2012/01/04 Javascript
怎么判断js脚本加载完成
2014/02/28 Javascript
jQuery插件Skippr实现焦点图幻灯片特效
2015/04/12 Javascript
javascript实现简单的省市区三级联动
2015/05/14 Javascript
javascript实现类似于新浪微博搜索框弹出效果的方法
2015/07/27 Javascript
jQuery实现指定内容滚动同时左侧或其它地方不滚动的方法
2015/08/08 Javascript
JS实现为排序好的字符串找出重复行的方法
2016/03/02 Javascript
jQuery Chart图表制作组件Highcharts用法详解
2016/06/01 Javascript
深入浅析knockout源码分析之订阅
2016/07/12 Javascript
详解Sea.js中Module.exports和exports的区别
2017/02/12 Javascript
微信小程序实现YDUI的ScrollNav组件
2018/02/02 Javascript
jQuery 动画与停止动画效果实例详解
2020/05/19 jQuery
js实现磁性吸附的示例
2020/10/26 Javascript
在Python中使用HTMLParser解析HTML的教程
2015/04/29 Python
tensorflow获取变量维度信息
2018/03/10 Python
Pandas统计重复的列里面的值方法
2019/01/30 Python
PyTorch搭建一维线性回归模型(二)
2019/05/22 Python
python实现把二维列表变为一维列表的方法分析
2019/10/08 Python
python由已知数组快速生成新数组的方法
2020/04/08 Python
Python读入mnist二进制图像文件并显示实例
2020/04/24 Python
《蒙娜丽莎之约》教学反思
2014/02/27 职场文书
中秋节主持词
2014/04/02 职场文书
三八妇女节活动总结
2014/05/04 职场文书
施工安全责任书范本
2014/07/24 职场文书
2014政府领导班子对照检查材料思想汇报(3篇)
2014/09/26 职场文书
英文道歉信
2015/01/20 职场文书
先进教师个人总结
2015/02/11 职场文书
大国崛起日本观后感
2015/06/02 职场文书
2016年党员干部公开承诺书
2016/03/24 职场文书
授权协议书范本(3篇)
2019/10/15 职场文书
导游词之江苏同里古镇
2019/11/18 职场文书
Python中常见的导入方式总结
2021/05/06 Python