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 相关文章推荐
极酷的javascirpt,让你随意编辑任何网页
Feb 25 Javascript
代码分析jQuery四种静态方法使用
Jul 23 Javascript
JS实现改变HTML上文字颜色和内容的方法
Dec 30 Javascript
canvas实现探照灯效果
Feb 07 Javascript
jquery设置css样式的多种方法(总结)
Feb 21 Javascript
js微信应用场景之微信音乐相册案例分享
Aug 11 Javascript
快速了解vue-cli 3.0 新特性
Feb 28 Javascript
webpack项目轻松混用css module的方法
Jun 12 Javascript
教你如何用node连接redis的示例代码
Jul 12 Javascript
vue配置接口域名方法总结
May 12 Javascript
微信JS-SDK实现微信会员卡功能(给用户微信卡包里发送会员卡)
Jul 25 Javascript
layui关闭层级、简单监听的实例
Sep 06 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 远程关机操作的代码
2008/12/05 PHP
防止本地用户用fsockopen DDOS攻击对策
2011/11/02 PHP
Yii框架实现多数据库配置和操作的方法
2017/05/25 PHP
php简单实现单态设计模式的方法分析
2017/07/28 PHP
Laravel框架实现多数据库连接操作详解
2019/07/12 PHP
laravel 关联关系遍历数组的例子
2019/10/10 PHP
用javascript实现给出的盒子的序列是否可连为一矩型
2007/08/30 Javascript
Javascript 自适应高度的Tab选项卡
2011/04/05 Javascript
js有关元素内容操作小结
2011/12/20 Javascript
jquery 实现checkbox全选,反选,全不选等功能代码(奇数)
2012/10/24 Javascript
jquery实现动态菜单的实例代码
2013/11/28 Javascript
jQuery中unbind()方法用法实例
2015/01/19 Javascript
js控制输入框获得和失去焦点时状态显示的方法
2015/01/30 Javascript
JavaScript常用函数工具集:lao-utils
2016/03/01 Javascript
js实现3d悬浮效果
2017/02/16 Javascript
JS仿QQ好友列表展开、收缩功能(第二篇)
2017/07/07 Javascript
vue select二级联动第二级默认选中第一个option值的实例
2018/01/10 Javascript
vue-cli项目中使用公用的提示弹层tips或加载loading组件实例详解
2018/05/28 Javascript
基于Koa(nodejs框架)对json文件进行增删改查的示例代码
2019/02/02 NodeJs
JavaScript变速动画函数封装添加任意多个属性
2019/04/03 Javascript
JavaScript中继承原理与用法实例入门
2020/05/09 Javascript
vue项目在webpack2实现移动端字体自适配功能
2020/06/02 Javascript
Python使用ftplib实现简易FTP客户端的方法
2015/06/03 Python
Python利用正则表达式匹配并截取指定子串及去重的方法
2015/07/30 Python
利用Python2下载单张图片与爬取网页图片实例代码
2017/12/25 Python
使用python爬取微博数据打造一颗“心”
2019/06/28 Python
简单介绍python封装的基本知识
2019/08/10 Python
pycharm双击无响应(打不开问题解决办法)
2020/01/10 Python
python有几个版本
2020/06/17 Python
瑞士领先的网上超市:LeShop.ch
2018/11/14 全球购物
Huda Beauty官方商店:化妆和美容产品
2020/09/05 全球购物
如果Session Bean得Remove方法一直都不被调用会怎么样
2012/07/14 面试题
化工专业应届生求职信
2013/11/08 职场文书
小学副班长竞选稿
2015/11/21 职场文书
css实现文章分割线样式的多种方法总结
2021/04/21 HTML / CSS
python中取整数的几种方法
2021/11/07 Python