JavaScript实现统计文本框Textarea字数增强用户体验


Posted in Javascript onDecember 21, 2012

现在流行的Twitter等微博客网站,有一个很好的用户体验,就是在文本框中输入文字的时候,会自动统计输入的字符,并显示用户还能输入的字符,在限制了140个字的微博客中,这样的小提示可以很好的增强用户体验。

如果实现这种技术呢,我进行了一些研究,发现实现其实挺简单,几行代码就能完成输入字符统计功能,经过实际测试,其对文字的统计与Twitter等微博客的完全相同。

使用方法是,先增加一个span,用于显示剩余的字数,然后在Textarea中,加入一个onkeydown和onkeyup的事件,调用另一段JavaScript函数,函数调用的参数为span的id和textarea的id,然后再JavaScript中使用innerHTML返回计算出来的剩余字数。

以下是相关的JavaScript代码
以下为引用的内容:

<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>
Javascript 相关文章推荐
JS DOM 操作实现代码
Aug 01 Javascript
Jquery知识点一 Jquery的ready和Dom的onload的区别
Jan 15 Javascript
判断用户的在线状态 onbeforeunload事件
Mar 05 Javascript
关于Javascript与iframe的那些事儿
Jul 04 Javascript
通过url查找a元素并点击
Apr 09 Javascript
js验证真实姓名与身份证号是否匹配
Oct 13 Javascript
jQuery简单实现对数组去重及排序操作实例
Oct 31 jQuery
vue2 设置router-view默认路径的实例
Sep 20 Javascript
Node.js net模块功能及事件监听用法分析
Jan 05 Javascript
JavaScript逻辑运算符相关总结
Sep 04 Javascript
JavaScript事件概念详解(区分静态注册和动态注册)
Feb 05 Javascript
ajax请求前端跨域问题原因及解决方案
Oct 16 Javascript
js返回上一页并刷新代码整理
Dec 21 #Javascript
左右悬浮可分组的网站QQ在线客服代码(可谓经典)
Dec 21 #Javascript
JS弹出窗口代码大全(详细整理)
Dec 21 #Javascript
mailto的使用技巧分享
Dec 21 #Javascript
一个页面放2段图片滚动代码出现冲突的问题如何解决
Dec 21 #Javascript
TextArea设置MaxLength属性最大输入值的js代码
Dec 21 #Javascript
JQuery实现简单时尚快捷的气泡提示插件
Dec 20 #Javascript
You might like
PHP与SQL注入攻击[三]
2007/04/17 PHP
php购物车实现代码
2011/10/10 PHP
ThinkPHP使用smarty模板引擎的方法
2014/07/01 PHP
PHP实现的一致性Hash算法详解【分布式算法】
2018/03/31 PHP
PHP PDOStatement::setFetchMode讲解
2019/02/03 PHP
[原创]网络复制内容时常用的正则+editplus
2006/11/30 Javascript
测试你的JS的掌握程度的代码
2009/12/09 Javascript
JS实现的不规则TAB选项卡效果代码
2015/09/18 Javascript
javascript实现表单验证
2016/01/29 Javascript
深入学习JavaScript的AngularJS框架中指令的使用方法
2016/03/05 Javascript
Javascript之面向对象--接口
2016/12/02 Javascript
JS制作类似选项卡切换的年历
2016/12/03 Javascript
js防刷新的倒计时代码 js倒计时代码
2017/09/06 Javascript
vue实现nav导航栏的方法
2017/12/13 Javascript
对vue里函数的调用顺序介绍
2018/03/17 Javascript
深入理解vue-class-component源码阅读
2019/02/18 Javascript
解决前后端分离 vue+springboot 跨域 session+cookie失效问题
2019/05/13 Javascript
Nuxt.js 静态资源和打包的操作
2020/11/06 Javascript
跨平台python异步回调机制实现和使用方法
2013/11/26 Python
Python脚本文件打包成可执行文件的方法
2015/06/02 Python
Django 添加静态文件的两种实现方法(必看篇)
2017/07/14 Python
解决python中导入win32com.client出错的问题
2019/07/26 Python
Python使用matplotlib绘制三维参数曲线操作示例
2019/09/10 Python
Python绘图实现显示中文
2019/12/04 Python
用python监控服务器的cpu,磁盘空间,内存,超过邮件报警
2021/01/29 Python
kmart凯马特官网:美国最大的打折零售商和全球最大的批发商之一
2016/11/17 全球购物
伦敦时尚生活的缩影:LN-CC
2017/01/24 全球购物
网络通讯中,端口有什么含义,端口的取值范围
2012/11/23 面试题
2014两会优秀的心得体会范文
2014/03/17 职场文书
会议主持词
2014/03/17 职场文书
个人委托书格式
2014/04/04 职场文书
会计岗位说明书
2014/07/29 职场文书
退休党员个人对照检查材料思想汇报
2014/09/29 职场文书
90条交通安全宣传标语
2019/10/12 职场文书
分享几个JavaScript运算符的使用技巧
2021/04/24 Javascript
golang 定时任务方面time.Sleep和time.Tick的优劣对比分析
2021/05/05 Golang