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代码
Oct 30 Javascript
六款帮助你实现惊艳视差滚动效果的jQuery插件
Sep 14 Javascript
JS中批量给元素绑定事件过程中的相关问题使用闭包解决
Apr 15 Javascript
JS 有趣的eval优化输入验证实例代码
Sep 22 Javascript
jQuery制作拼图小游戏
Jan 12 Javascript
jquery计算出left和top,让一个div水平垂直居中的简单实例
Jul 13 Javascript
解析js如何获取css样式
Dec 11 Javascript
详解Vue-cli代理解决跨域问题
Sep 27 Javascript
mpvue中配置vuex并持久化到本地Storage图文教程解析
Mar 15 Javascript
javascript跳转与返回和刷新页面的实例代码
Nov 20 Javascript
OpenLayers3实现图层控件功能
Sep 25 Javascript
WebStorm中如何将自己的代码上传到github示例详解
Oct 28 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调用Java对象的方法
2006/10/09 PHP
深入解析php模板技术原理【一】
2008/01/10 PHP
php中的PHP_EOL换行符详细解析
2013/10/26 PHP
PHP实现支持加盐的图片加密解密
2016/09/09 PHP
thinkphp中多表查询中防止数据重复的sql语句(必看)
2016/09/22 PHP
php实现的二叉树遍历算法示例
2017/06/15 PHP
jQuery 过滤not()与filter()实例代码
2012/05/10 Javascript
使用apply方法处理数组的三个技巧[译]
2012/09/20 Javascript
浅析document.createDocumentFragment()与js效率
2013/07/08 Javascript
基于jquery的9行js轻松实现tab控件示例
2013/10/12 Javascript
javascript中定义私有方法说明(private method)
2014/01/27 Javascript
javascript断点调试心得分享
2016/04/23 Javascript
浅谈JavaScript中小数和大整数的精度丢失
2016/05/31 Javascript
jQuery简单实现仿京东分类导航层效果
2016/06/07 Javascript
JS 实现随机验证码功能
2017/02/15 Javascript
JS排序之选择排序详解
2017/04/08 Javascript
vue 使用html2canvas将DOM转化为图片的方法
2018/09/11 Javascript
python dict remove数组删除(del,pop)
2013/03/24 Python
举例讲解Python中的算数运算符的用法
2015/05/13 Python
python统计文本文件内单词数量的方法
2015/05/30 Python
python3中dict(字典)的使用方法示例
2017/03/22 Python
Python 3中print函数的使用方法总结
2017/08/08 Python
Python tkinter事件高级用法实例
2018/01/31 Python
python3中zip()函数使用详解
2018/06/29 Python
python抓取网页内容并进行语音播报的方法
2018/12/24 Python
python 画三维图像 曲面图和散点图的示例
2018/12/29 Python
Python实现的在特定目录下导入模块功能分析
2019/02/11 Python
Form表单及django的form表单的补充
2019/07/25 Python
Python如何实现后端自定义认证并实现多条件登陆
2020/06/22 Python
荷兰和比利时时尚鞋店:Van Dalen
2018/04/23 全球购物
护士演讲稿范文
2014/01/05 职场文书
兴趣小组活动总结
2014/05/05 职场文书
演讲稿格式范文
2014/05/19 职场文书
vue backtop组件的实现完整代码
2021/04/07 Vue.js
2007年老电脑安装win11会怎么样? 网友实测win11在老电脑运行良好
2021/11/21 数码科技
Python+Selenium自动化环境搭建与操作基础详解
2022/03/13 Python