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 相关文章推荐
图片之间的切换
Jun 26 Javascript
jQuery 动态酷效果实现总结
Dec 27 Javascript
jQuery学习笔记之jQuery的DOM操作
Dec 22 Javascript
javascript判断ie浏览器6/7版本加载不同样式表的实现代码
Dec 26 Javascript
THREE.JS入门教程(5)你应当知道的十件事
Jan 24 Javascript
JQuery的自定义事件代码,触发,绑定简单实例
Aug 01 Javascript
JS+DIV+CSS实现仿表单下拉列表效果
Aug 18 Javascript
详解Angular开发中的登陆与身份验证
Jul 27 Javascript
Javascript 制作图形验证码实例详解
Dec 22 Javascript
JavaScript 中的 this 工作原理
Jun 20 Javascript
vue-cli脚手架打包静态资源请求出错的原因与解决
Jun 06 Javascript
微信小程序基于ColorUI构建皮皮虾短视频去水印组件
Nov 04 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
php5.2以下版本无json_decode函数的解决方法
2014/05/25 PHP
ThinkPHP采用实现三级循环代码实例
2014/07/18 PHP
Extjs4 GridPanel的主要配置参数详细介绍
2013/04/18 Javascript
jQuery通过点击行来删除HTML表格行的实现示例
2014/09/10 Javascript
javascript中scrollTop详解
2015/04/13 Javascript
js对象浅拷贝和深拷贝详解
2016/09/05 Javascript
Javascript实现前端简单的路由实例
2016/09/11 Javascript
jQuery如何防止Ajax重复提交
2016/10/14 Javascript
JavaScript实现窗口抖动效果
2016/10/19 Javascript
通过bootstrap全面学习less
2016/11/09 Javascript
Asp.Net之JS生成分页条的方法
2016/11/23 Javascript
Angular directive递归实现目录树结构代码实例
2017/05/05 Javascript
js实现股票实时刷新数据案例
2017/05/14 Javascript
详解React native fetch遇到的坑
2018/08/30 Javascript
手挽手带你学React之React-router4.x的使用
2019/02/14 Javascript
微信小程序—setTimeOut定时器的问题及解决
2019/07/26 Javascript
VUE 自定义组件模板的方法详解
2019/08/30 Javascript
vue 实现用户登录方式的切换功能
2020/04/14 Javascript
vue中的v-model原理,与组件自定义v-model详解
2020/08/04 Javascript
浅谈nuxtjs校验登录中间件和混入(mixin)
2020/11/06 Javascript
VUE-ElementUI 自定义Loading图操作
2020/11/11 Javascript
python爬虫入门教程--快速理解HTTP协议(一)
2017/05/25 Python
python实现多层感知器MLP(基于双月数据集)
2019/01/18 Python
如何不用安装python就能在.NET里调用Python库
2019/07/12 Python
Numpy与Pytorch 矩阵操作方式
2019/12/27 Python
python lambda函数及三个常用的高阶函数
2020/02/05 Python
Python实现壁纸下载与轮换
2020/10/19 Python
PacSun官网:加州生活方式服装、鞋子和配饰
2018/03/10 全球购物
西班牙在线宠物食品和配件商店:bitiba
2019/10/11 全球购物
农村婚礼证婚词
2014/01/10 职场文书
学生思想表现的评语
2014/01/30 职场文书
《厄运打不垮的信念》教学反思
2014/04/13 职场文书
无偿献血倡议书
2014/04/14 职场文书
社保代办委托书怎么写
2014/10/06 职场文书
学生会招新宣传语
2015/07/13 职场文书
企业内部管理控制:采购授权审批制度范本
2020/01/19 职场文书