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 相关文章推荐
autoPlay 基于jquery的图片自动播放效果
Dec 07 Javascript
左右悬浮可分组的网站QQ在线客服代码(可谓经典)
Dec 21 Javascript
javascript实现英文首字母大写
Apr 23 Javascript
MVC+jQuery.Ajax异步实现增删改查和分页
Dec 22 Javascript
使用Promise解决多层异步调用的简单学习心得
May 17 Javascript
详解获取jq ul第一个li定位的四种解决方案
Nov 23 Javascript
jquery仿苹果的时间/日期选择效果
Mar 08 Javascript
Angular中支持SCSS的方法
Nov 18 Javascript
Three.js实现3D机房效果
Dec 30 Javascript
es6中new.target的作用和使用场景简单示例分析
Mar 14 Javascript
vue 授权获取微信openId操作
Nov 13 Javascript
【js设计模式】SOLID五大设计原则
Mar 24 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压缩多个CSS为一个css的代码并缓存
2011/04/21 PHP
php模拟socket一次连接,多次发送数据的实现代码
2011/07/26 PHP
php计算两个坐标(经度,纬度)之间距离的方法
2015/04/17 PHP
PHP中生成UUID自定义函数分享
2015/06/10 PHP
PHP中substr_count()函数获取子字符串出现次数的方法
2016/01/07 PHP
php版微信小店API二次开发及使用示例
2016/11/12 PHP
php字符集转换
2017/01/23 PHP
源码分析 Laravel 重复执行同一个队列任务的原因
2017/12/25 PHP
对laravel in 查询的使用方法详解
2019/10/09 PHP
JavaScript this 深入理解
2009/07/30 Javascript
javascript客户端解决方案 缓存提供程序
2010/07/14 Javascript
JS跨域问题详解
2014/11/25 Javascript
Javascript控制input输入时间格式的方法
2015/01/28 Javascript
js实现点击链接后延迟3秒再跳转的方法
2015/06/05 Javascript
JS与jQ读取xml文件的方法
2015/12/08 Javascript
jquery中ajax处理跨域的三大方式
2016/01/05 Javascript
Vue.js教程之axios与网络传输的学习实践
2017/04/29 Javascript
JavaScript实现的贝塞尔曲线算法简单示例
2018/01/30 Javascript
urllib2自定义opener详解
2014/02/07 Python
离线安装Pyecharts的步骤以及依赖包流程
2020/04/23 Python
django 2.0更新的10条注意事项总结
2018/01/05 Python
Django 使用Ajax进行前后台交互的示例讲解
2018/05/28 Python
python实战串口助手_解决8串口多个发送的问题
2019/06/12 Python
使用Pyinstaller转换.py文件为.exe可执行程序过程详解
2019/08/06 Python
Python使用python-docx读写word文档
2019/08/26 Python
Python图像处理库PIL中图像格式转换的实现
2020/02/26 Python
HTML5地理定位_动力节点Java学院整理
2017/07/12 HTML / CSS
家庭睡衣和家庭用品:Little Blue House
2018/03/18 全球购物
美国山地自行车、露营、户外装备和服装购物网站:Aventuron
2018/05/05 全球购物
竞争上岗演讲稿
2014/01/05 职场文书
欢度春节标语
2014/07/01 职场文书
于丹讲座视频观后感
2015/06/15 职场文书
初中体育教学随笔
2015/08/15 职场文书
python 使用tkinter与messagebox写界面和弹窗
2022/03/20 Python
MySQL创建表操作命令分享
2022/03/25 MySQL
SpringBoot全局异常处理方案分享
2022/05/25 Java/Android