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技巧
Dec 06 Javascript
JavaScript 事件查询综合
Jul 13 Javascript
火狐下input焦点无法重复获取问题的解决方法
Jun 16 Javascript
JavaScript的jQuery库中function的存在和参数问题
Aug 13 Javascript
jquery实现经典的淡入淡出选项卡效果代码
Sep 22 Javascript
第七章之菜单按钮图标组件
Apr 25 Javascript
微信小程序  生命周期详解
Oct 27 Javascript
Node.js和Express简单入门介绍
Mar 24 Javascript
js实现轮播图的两种方式(构造函数、面向对象)
Sep 30 Javascript
vue-cli 关闭热更新操作
Sep 18 Javascript
解决VantUI popup 弹窗不弹出或无蒙层的问题
Nov 03 Javascript
vue使用Google Recaptcha验证的实现示例
Aug 23 Vue.js
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中mysql_field_type()函数用法
2014/11/24 PHP
PHP实现获取文件后缀名的几种常用方法
2015/08/08 PHP
PHP的Socket网络编程入门指引
2015/08/11 PHP
PHP抽奖算法程序代码分享
2015/10/08 PHP
php + ajax 实现的写入数据库操作简单示例
2020/05/16 PHP
javascript之对系统的toFixed()方法的修正
2007/05/08 Javascript
JavaScript编程开发中的五个实用小技巧
2010/07/22 Javascript
理解Javascript_14_函数形式参数与arguments
2010/10/20 Javascript
js 火狐下取本地路径实现思路
2013/04/02 Javascript
Jquery时间验证和转换工具小例子
2013/07/01 Javascript
jtable列中自定义button示例代码
2013/11/21 Javascript
JavaScript cookie的设置获取删除详解
2014/02/11 Javascript
js中style.display=&quot;&quot;无效的解决方法
2014/10/30 Javascript
javascript解析json实例详解
2014/11/05 Javascript
jQuery实现跨域iframe接口方法调用
2015/03/14 Javascript
JavaScript判断按钮被点击的方法
2015/12/13 Javascript
微信小程序 wxapp内容组件 icon详细介绍
2016/10/31 Javascript
详解vue 模版组件的三种用法
2017/07/21 Javascript
基于vue、react实现倒计时效果
2019/08/26 Javascript
jQuery实现简单聊天室
2020/02/08 jQuery
JavaScript实现电灯开关小案例
2020/03/30 Javascript
解决新建一个vue项目过程中遇到的问题
2020/10/22 Javascript
Vue向后台传数组数据,springboot接收vue传的数组数据实例
2020/11/12 Javascript
Django中对通过测试的用户进行限制访问的方法
2015/07/23 Python
python3安装pip3(install pip3 for python 3.x)
2018/04/03 Python
python分数表示方式和写法
2019/06/26 Python
Python+numpy实现矩阵的行列扩展方式
2019/11/29 Python
python数字类型math库原理解析
2020/03/02 Python
Python StringIO及BytesIO包使用方法解析
2020/06/15 Python
浅析python连接数据库的重要事项
2021/02/22 Python
纯css实现照片墙3D效果的示例代码
2017/11/13 HTML / CSS
简单的HTML5初步入门教程
2015/09/29 HTML / CSS
Linux不知道文件后缀名怎么判断文件类型
2012/04/26 面试题
恒华伟业笔试面试题
2015/02/26 面试题
警察群众路线整改措施
2014/09/26 职场文书
工作骂脏话检讨书
2014/10/05 职场文书