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 相关文章推荐
基于jquery固定于顶部的导航响应浏览器滚动条事件
Nov 02 Javascript
JS实现带有抽屉效果的产品类网站多级导航菜单代码
Sep 15 Javascript
JS+CSS实现简易的滑动门效果代码
Sep 24 Javascript
jQuery实现ctrl+enter(回车)提交表单
Oct 19 Javascript
基于Angularjs实现分页功能
May 30 Javascript
js H5 canvas投篮小游戏
Aug 18 Javascript
Angular.js中用ng-repeat-start实现自定义显示
Oct 18 Javascript
jquery实现超简单的瀑布流布局【推荐】
Mar 08 Javascript
浅析JavaScript中的平稳退化(graceful degradation)
Jul 24 Javascript
客户端(vue框架)与服务器(koa框架)通信及服务器跨域配置详解
Aug 26 Javascript
vue双向绑定及观察者模式详解
Mar 19 Javascript
javascript利用键盘控制小方块的移动
Apr 20 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简单生成随机数的方法
2015/07/30 PHP
在Mac OS的PHP环境下安装配置MemCache的全过程解析
2016/02/15 PHP
php简单的上传类分享
2016/05/15 PHP
PHP7新特性之抽象语法树(AST)带来的变化详解
2018/07/17 PHP
PHP实现通过文本文件统计页面访问量功能示例
2019/02/13 PHP
TextArea设置MaxLength属性最大输入值的js代码
2012/12/21 Javascript
jQuery contains过滤器实现精确匹配使用方法
2013/04/12 Javascript
js自动下载文件到本地的实现代码
2013/04/28 Javascript
js获得网页背景色和字体色的方法
2014/03/21 Javascript
javascript学习笔记(六)数据类型和JSON格式
2014/10/08 Javascript
jquery实现触发时更新下拉列表内容的方法
2015/12/02 Javascript
JavaScript结合Bootstrap仿微信后台多图文界面管理
2016/07/22 Javascript
简单实现js点击展开二级菜单功能
2017/05/16 Javascript
vue-router实现组件间的跳转(参数传递)
2017/11/07 Javascript
vue init失败简单解决方法(终极版)
2017/12/22 Javascript
微信小程序网络请求封装示例
2018/07/24 Javascript
详解如何在JS代码中消灭for循环
2019/12/11 Javascript
Vue.js中Line第三方登录api的实现代码
2020/06/29 Javascript
JavaScript 中的六种循环方法
2021/01/06 Javascript
[48:22]VGJ.S vs VG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python和perl实现批量对目录下电子书文件重命名的代码分享
2014/11/21 Python
Python爬虫包 BeautifulSoup  递归抓取实例详解
2017/01/28 Python
python数据清洗系列之字符串处理详解
2017/02/12 Python
对Tensorflow中的变量初始化函数详解
2018/07/27 Python
使用Python监视指定目录下文件变更的方法
2018/10/15 Python
linux安装python修改默认python版本方法
2019/03/31 Python
Python实现性能自动化测试竟然如此简单
2019/07/30 Python
PyCharm License Activation激活码失效问题的解决方法(图文详解)
2020/03/12 Python
Python爬虫:Request Payload和Form Data的简单区别说明
2020/04/30 Python
Django-imagekit的使用详解
2020/07/06 Python
Django CBV模型源码运行流程详解
2020/08/17 Python
python speech模块的使用方法
2020/09/09 Python
浅析canvas元素的html尺寸和css尺寸对元素视觉的影响
2019/07/22 HTML / CSS
2014镇副书记群众路线专题民主生活会思想汇报
2014/09/23 职场文书
考研复习计划
2015/01/19 职场文书
Java图书管理系统,课程设计必用(源码+文档)
2021/06/30 Java/Android