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 相关文章推荐
javascript读取xml
Nov 04 Javascript
用jQuery技术实现Tab页界面之二
Sep 21 Javascript
ExtJS 下拉多选框lovcombo
May 19 Javascript
点击进行复制的JS代码实例
Aug 23 Javascript
jQuery自定义添加&quot;$&quot;与解决&quot;$&quot;冲突的方法
Jan 19 Javascript
为什么JavaScript没有块级作用域
May 22 Javascript
JS实现颜色梯度与渐变效果完整实例
Dec 30 Javascript
如何把vuejs打包出来的文件整合到springboot里
Jul 26 Javascript
详解vuex之store拆分即多模块状态管理(modules)篇
Nov 13 Javascript
微信小程序入门之广告条实现方法示例
Dec 05 Javascript
vuex页面刷新后数据丢失的方法
Jan 17 Javascript
Vue全局事件总线你了解吗
Feb 24 Vue.js
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实现采集程序原理和简单示例代码
2007/03/18 PHP
让PHP开发者事半功倍的十大技巧小结
2010/04/20 PHP
基于jquery实现漂亮的动态信息提示效果
2011/08/02 Javascript
如何让页面加载完成后执行js
2013/06/26 Javascript
浅析js预加载/延迟加载
2014/09/25 Javascript
jQuery制作简单柱状图实例
2015/01/28 Javascript
JavaScript获取一个范围内日期的方法
2015/04/24 Javascript
浅谈JavaScript中的Math.atan()方法的使用
2015/06/14 Javascript
javascript伸缩型菜单实现代码
2015/11/16 Javascript
javascript实现鼠标点击页面 移动DIV
2016/12/02 Javascript
jquery+css实现简单的图片轮播效果
2017/08/07 jQuery
细说webpack源码之compile流程-rules参数处理技巧(1)
2017/12/26 Javascript
Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners)
2018/05/04 Javascript
详解vue更改头像功能实现
2019/04/28 Javascript
微信小程序跨页面传递data数据方法解析
2019/12/13 Javascript
python基础教程之缩进介绍
2014/08/29 Python
django1.8使用表单上传文件的实现方法
2016/11/04 Python
Python面向对象特殊成员
2017/04/24 Python
Python 将RGB图像转换为Pytho灰度图像的实例
2017/11/14 Python
python模糊图片过滤的方法
2018/12/14 Python
Python面向对象程序设计类的多态用法详解
2019/04/12 Python
Python中print函数简单使用总结
2019/08/05 Python
python之PyQt按钮右键菜单功能的实现代码
2019/08/17 Python
详解python环境安装selenium和手动下载安装selenium的方法
2020/03/17 Python
Python轻量级web框架bottle使用方法解析
2020/06/13 Python
详解Python IO口多路复用
2020/06/17 Python
OpenCV实现机器人对物体进行移动跟随的方法实例
2020/11/09 Python
俄罗斯优惠券网站:BIGLION
2017/05/21 全球购物
软件设计的目标是什么
2016/12/04 面试题
生物制药自我鉴定
2014/01/25 职场文书
村容村貌整治方案
2014/05/21 职场文书
历史学专业求职信
2014/06/19 职场文书
2014年控辍保学工作总结
2014/12/08 职场文书
幼儿园教师工作总结2015
2015/04/02 职场文书
教师个人师德工作总结2015
2015/05/12 职场文书
中秋节祝酒词
2015/08/12 职场文书