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 相关文章推荐
文本有关的样式和jQuery求对象的高宽问题分别说明
Aug 30 Javascript
javascript确认框的三种使用方法
Dec 17 Javascript
原生js实现淘宝首页点击按钮缓慢回到顶部效果
Apr 06 Javascript
javascript实现tab切换的两个实例
Nov 05 Javascript
JavaScript获取IP获取的是IPV6 如何校验
Jun 12 Javascript
Vue.js实战之通过监听滚动事件实现动态锚点
Apr 04 Javascript
js评分组件使用详解
Jun 06 Javascript
webpack + vue 打包生成公共配置文件(域名) 方便动态修改
Aug 29 Javascript
JS判断浏览器类型与操作系统的方法分析
Apr 30 Javascript
Vue如何实现组件间通信
May 15 Vue.js
Vue+TypeScript中处理computed方式
Apr 02 Vue.js
Vue Mint UI mt-swipe的使用方式
Jun 05 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 用数组降低程序的时间复杂度
2009/12/04 PHP
php学习之 认清变量的作用范围
2010/01/26 PHP
基于PHP实现的事件机制实例分析
2015/06/18 PHP
使用URL传输SESSION信息
2015/07/14 PHP
PHP中set_include_path()函数相关用法分析
2016/07/18 PHP
php7基于递归实现删除空文件夹的方法示例
2017/06/15 PHP
PHP解析url并得到url参数方法总结
2018/10/11 PHP
网站导致浏览器崩溃的原因总结(多款浏览器) 推荐
2010/04/15 Javascript
事件模型在各浏览器中存在差异
2010/10/20 Javascript
Javascript实现仿WebQQ界面的“浮云”兼容 IE7以上版本及FF
2011/04/27 Javascript
Javascript 面向对象(二)封装代码
2012/05/23 Javascript
jQuery仿Excel表格编辑功能的实现代码
2013/05/01 Javascript
jquery超简单实现手风琴效果的方法
2015/06/05 Javascript
javascript动态生成树形菜单的方法
2015/11/14 Javascript
AngularJS 入门教程之事件处理器详解
2016/08/19 Javascript
javascript入门之数组[新手必看]
2016/11/21 Javascript
jquery实现轮播图效果
2017/02/13 Javascript
ES5学习教程之Array对象
2017/04/01 Javascript
Ionic3 UI组件之Gallery Modal详解
2017/06/07 Javascript
详解用webpack2搭建angular2的项目
2017/06/22 Javascript
Angular限制input框输入金额(是小数的话只保留两位小数点)
2017/07/13 Javascript
使用vue开发移动端管理后台的注意事项
2019/03/07 Javascript
使用Vue实现移动端左滑删除效果附源码
2019/05/16 Javascript
Python MD5文件生成码
2009/01/12 Python
python实现zencart产品数据导入到magento(python导入数据)
2014/04/03 Python
Python实现ssh批量登录并执行命令
2016/10/25 Python
Python基于mysql实现学生管理系统
2019/02/21 Python
python 爬虫 实现增量去重和定时爬取实例
2020/02/28 Python
将tf.batch_matmul替换成tf.matmul的实现
2020/06/18 Python
python获取天气接口给指定微信好友发天气预报
2020/12/28 Python
html通过canvas转成base64的方法
2019/07/18 HTML / CSS
Silk Therapeutics官网:清洁、抗衰老护肤品
2020/08/12 全球购物
J2EE的优越性主要表现在哪些方面
2016/03/28 面试题
护士求职自荐信范文
2015/03/04 职场文书
MYSQL优化之数据表碎片整理详解
2022/04/03 MySQL
游戏《我的世界》澄清Xbox版暂无计划加入光追
2022/04/03 其他游戏