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 相关文章推荐
脚本吧 - 幻宇工作室用到js,超强推荐base.js
Dec 23 Javascript
Javascript 强制类型转换函数
May 17 Javascript
js动画(animate)简单引擎代码示例
Dec 04 Javascript
Json和Jsonp理论实例代码详解
Nov 15 Javascript
JS数组(Array)处理函数整理
Dec 07 Javascript
jQuery插件datalist实现很好看的input下拉列表
Jul 14 Javascript
.NET微信公众号开发之创建自定义菜单
Jul 16 Javascript
基于BootStrap Metronic开发框架经验小结【四】Bootstrap图标的提取和利用
May 12 Javascript
JS判断iframe是否加载完成的方法
Aug 03 Javascript
jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据
Aug 15 Javascript
Javascript Function.prototype.bind详细分析
Dec 29 Javascript
jacascript DOM节点——元素节点、属性节点、文本节点
Apr 18 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中addcslashes与stripcslashes函数用法分析
2016/01/07 PHP
PHP常见数组函数用法小结
2016/03/21 PHP
thinkphp5 框架结合plupload实现图片批量上传功能示例
2020/04/04 PHP
javascript replace方法与正则表达式
2008/02/19 Javascript
JavaScript中Object和Function的关系小结
2009/09/26 Javascript
IE中createElement需要注意的一个问题
2010/07/13 Javascript
Linux下使用jq友好的打印JSON技巧分享
2014/11/18 Javascript
node.js实现BigPipe详解
2014/12/05 Javascript
WEB前端设计师常用工具集锦
2014/12/09 Javascript
JavaScript显示表单内元素数量的方法
2015/04/02 Javascript
jQuery实现订单提交页发送短信功能前端处理方法
2016/07/04 Javascript
jQuery弹出遮罩层效果完整示例
2016/09/13 Javascript
javascript实现将数字转成千分位的方法小结【5种方式】
2016/12/11 Javascript
javascript显示系统当前时间代码
2016/12/29 Javascript
详解webpack和webpack-simple中如何引入css文件
2017/06/28 Javascript
JS实现按钮颜色切换效果
2020/09/05 Javascript
Vue中v-for的数据分组实例
2018/03/07 Javascript
node.js到底要不要加分号浅析
2018/07/11 Javascript
在Vue 中使用Typescript的示例代码
2018/09/10 Javascript
基于three.js实现的3D粒子动效实例代码
2019/04/09 Javascript
vue中的面包屑导航组件实例代码
2019/07/01 Javascript
jQuery高级编程之js对象、json与ajax用法实例分析
2019/11/01 jQuery
Vue 使用typescript如何优雅的调用swagger API
2020/09/01 Javascript
在JavaScript中查找字符串中最长单词的三种方法(推荐)
2021/01/18 Javascript
Python 正则表达式实现计算器功能
2017/04/29 Python
python3调用windows dos命令的例子
2019/08/14 Python
Python如何使用字符打印照片
2020/01/03 Python
如何在Canvas中添加事件的方法示例
2019/05/21 HTML / CSS
Clos19英国:高档香槟、葡萄酒和烈酒在线购物平台
2020/07/10 全球购物
2014年民政工作总结
2014/11/26 职场文书
离婚代理词范文
2015/05/23 职场文书
七夕情人节问候语
2015/11/11 职场文书
测量JavaScript函数的性能各种方式对比
2021/04/27 Javascript
Django分页器的用法你都了解吗
2021/05/26 Python
聊聊Python中关于a=[[]]*3的反思
2021/06/02 Python
Mysql分库分表之后主键处理的几种方法
2022/02/15 MySQL