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 获取网页参数系统
Jul 19 Javascript
JavaScript打开word文档的实现代码(c#)
Apr 16 Javascript
open 动态修改img的onclick事件示例代码
Nov 13 Javascript
IE6-8中Date不支持toISOString的修复方法
May 04 Javascript
js处理php输出时间戳对不上号的解决方法
Jun 20 Javascript
Jquery网页内滑动缓冲导航的实现代码
Apr 05 Javascript
非常优秀的JS图片轮播插件Swiper的用法
Jan 03 Javascript
微信小程序 Animation实现图片旋转动画示例
Aug 22 Javascript
详解Vue前端生产环境发布配置实战篇
May 07 Javascript
BootStrap表单验证中的非Submit类型按钮点击时触发验证的坑
Sep 05 Javascript
Echarts实现多条折线可拖拽效果
Dec 19 Javascript
vue中的过滤器及其时间格式化问题
Apr 09 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
Protoss兵种对照表
2020/03/14 星际争霸
PHP 命名空间实例说明
2011/01/27 PHP
解读PHP的Yii框架中请求与响应的处理流程
2016/03/17 PHP
php基于PDO连接MSSQL示例DEMO
2016/07/13 PHP
JQuery index()方法使用代码
2010/06/02 Javascript
JavaScript中双叹号(!!)作用示例介绍
2014/04/10 Javascript
JS实现颜色梯度与渐变效果完整实例
2016/12/30 Javascript
js实现网页定位导航功能
2017/03/07 Javascript
jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】
2017/03/24 jQuery
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
2017/03/28 jQuery
jquery实现提示语淡入效果
2017/05/05 jQuery
vue :src 文件路径错误问题的解决方法
2018/05/15 Javascript
Vue + Elementui实现多标签页共存的方法
2019/06/12 Javascript
js+css实现全屏侧边栏
2020/06/16 Javascript
在vs code 中如何创建一个自己的 Vue 模板代码
2020/11/10 Javascript
vue穿梭框实现上下移动
2021/01/29 Vue.js
跟老齐学Python之有点简约的元组
2014/09/24 Python
python中日期和时间格式化输出的方法小结
2015/03/19 Python
zookeeper python接口实例详解
2018/01/18 Python
使用实现pandas读取csv文件指定的前几行
2018/04/20 Python
Python(Django)项目与Apache的管理交互的方法
2018/05/16 Python
PyTorch: 梯度下降及反向传播的实例详解
2019/08/20 Python
Python上下文管理器用法及实例解析
2019/11/11 Python
Python如何定义有默认参数的函数
2020/08/10 Python
丝芙兰法国官网:SEPHORA法国
2016/09/01 全球购物
Revolution Beauty美国官网:英国知名化妆品网站
2018/07/23 全球购物
Arti-shopping中文官网:大型海外商品一站式直邮平台
2020/03/23 全球购物
怎样创建、运行java程序
2014/08/01 面试题
大学生通用个人的自我评价
2014/02/10 职场文书
幼儿园教师的考核评语
2014/04/18 职场文书
学校社会实践活动总结
2014/07/03 职场文书
大学生党员自我剖析材料
2014/10/06 职场文书
学校通报表扬范文
2015/05/04 职场文书
增值税发票丢失证明
2015/06/19 职场文书
田径运动会广播稿
2015/08/19 职场文书
2019年圣诞节祝福语集锦
2019/12/25 职场文书