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基本概念初级讲解论坛贴的学习记录
Feb 22 Javascript
基于jQuery的Spin Button自定义文本框数值自增或自减
Jul 17 Javascript
扩展JS Date对象时间格式化功能的小例子
Dec 02 Javascript
js判断iframe内的网页是否滚动到底部触发事件
Mar 18 Javascript
jquery 绑定回车动作扑捉回车键触发的事件
Mar 26 Javascript
检测一个函数是否是JavaScript原生函数的小技巧
Mar 13 Javascript
jquery实现的V字形显示效果代码
Oct 27 Javascript
AngularJS+Bootstrap实现多文件上传与管理
Nov 08 Javascript
jQuery zTree树插件动态加载实例代码
May 11 jQuery
vue实现点击隐藏与显示实例分享
Feb 13 Javascript
Node.JS枚举统计当前文件夹和子目录下所有代码文件行数
Aug 23 Javascript
JavaScript对象属性操作实例解析
Feb 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
php建立Ftp连接的方法
2015/03/07 PHP
laravel框架 api自定义全局异常处理方法
2019/10/11 PHP
PHP判断当前使用的是什么浏览器(推荐)
2019/10/27 PHP
漂亮的widgets,支持换肤和后期开发新皮肤
2007/04/23 Javascript
javascript div 遮罩层封锁整个页面
2009/07/10 Javascript
JQuery 应用 JQuery.groupTable.js
2010/12/15 Javascript
JQuery表格内容过滤的实现方法
2013/07/05 Javascript
使用JavaScript 编写简单计算器
2014/11/24 Javascript
JavaScript模拟鼠标右键菜单效果
2020/12/08 Javascript
JavaScript实现页面定时刷新(定时器,meta)
2016/10/12 Javascript
利用vscode调试编译后的js代码详解
2018/05/14 Javascript
jQuery实现适用于移动端的跑马灯抽奖特效示例
2019/01/18 jQuery
详解vue项目中调用百度地图API使用方法
2019/04/25 Javascript
Vue.js中的extend绑定节点并显示的方法
2019/06/20 Javascript
在antd4.0中Form使用initialValue操作
2020/11/02 Javascript
初步认识Python中的列表与位运算符
2015/10/12 Python
Python入门_浅谈字符串的分片与索引、字符串的方法
2017/05/16 Python
pygame实现弹力球及其变速效果
2017/07/03 Python
简单谈谈python中的lambda表达式
2018/01/19 Python
pycharm 解除默认unittest模式的方法
2018/11/30 Python
python通过paramiko复制远程文件及文件目录到本地
2019/04/30 Python
Python 保持登录状态进行接口测试的方法示例
2019/08/06 Python
python下载库的步骤方法
2019/10/12 Python
win10系统下python3安装及pip换源和使用教程
2020/01/06 Python
Keras使用tensorboard显示训练过程的实例
2020/02/15 Python
python使用gdal对shp读取,新建和更新的实例
2020/03/10 Python
Python环境配置实现pip加速过程解析
2020/11/27 Python
美国儿童服装、家具和玩具精品店:Maisonette
2019/11/24 全球购物
全球最大化妆品零售网站:SkinStore
2020/10/24 全球购物
商得四方公司面试题(gid+)
2014/04/30 面试题
搞笑获奖感言
2014/01/30 职场文书
数控技术专业毕业自荐书范文
2014/02/05 职场文书
老干部工作先进集体事迹材料
2014/05/21 职场文书
学生自我鉴定格式及范文
2014/09/16 职场文书
2014年感恩节活动策划方案
2014/10/06 职场文书
CSS实现两列布局的N种方法
2021/08/02 HTML / CSS