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 相关文章推荐
js loading加载效果实现代码
Nov 24 Javascript
JS Excel读取和写入操作(模板操作)实现代码
Apr 11 Javascript
event.X和event.clientX的区别分析
Oct 06 Javascript
jQuery 仿百度输入标签插件附效果图
Jul 04 Javascript
使用VS开发 Node.js指南
Jan 06 Javascript
快速解决js动态改变dom元素属性后页面及时渲染的问题
Jul 06 Javascript
vue.js实现备忘录功能的方法
Jul 10 Javascript
React Native实现进度条弹框的示例代码
Jul 17 Javascript
JS实现的base64加密解密操作示例
Apr 18 Javascript
使用vue2实现带地区编号和名称的省市县三级联动效果
Nov 05 Javascript
简单了解TypeScript中如何继承 Error 类
Jun 21 Javascript
Javascript作用域和作用域链原理解析
Mar 03 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的SQL注入实现(测试代码安全不错)
2011/02/27 PHP
PHP用SAX解析XML的实现代码与问题分析
2011/08/22 PHP
php创建基本身份认证站点的方法详解
2013/06/08 PHP
wampserver改变默认网站目录的办法
2015/08/05 PHP
PHP微信开发之查询城市天气
2016/06/23 PHP
HR vs CL BO3 第二场 2.13
2021/03/10 DOTA
javascript 客户端验证上传图片的大小(兼容IE和火狐)
2009/08/15 Javascript
面向对象的Javascript之二(接口实现介绍)
2012/01/27 Javascript
基于jquery的图片轮播 tab切换组件
2012/07/19 Javascript
基于pthread_create,readlink,getpid等函数的学习与总结
2013/07/17 Javascript
微信小程序 购物车简单实例
2016/10/24 Javascript
jquery代码规范让代码越来越好看
2017/02/03 Javascript
数组Array的一些方法(总结)
2017/02/17 Javascript
深究AngularJS中ng-drag、ng-drop的用法
2017/06/12 Javascript
浅谈vue的iview列表table render函数设置DOM属性值的方法
2017/09/30 Javascript
微信小程序实现横向增长表格的方法
2018/07/24 Javascript
Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)
2018/08/16 Javascript
JSON字符串操作移除空串更改key/value的介绍
2019/01/05 Javascript
详解Vue中使用Axios拦截器
2019/04/22 Javascript
scrapyd schedule.json setting 传入多个值问题
2019/08/07 Javascript
Vue 实例事件简单示例
2019/09/19 Javascript
解决 window.onload 被覆盖的问题方法
2020/01/14 Javascript
详解vue中使用transition和animation的实例代码
2020/12/12 Vue.js
使用vue3重构拼图游戏的实现示例
2021/01/25 Vue.js
python如何读写json数据
2018/03/21 Python
python和mysql交互操作实例详解【基于pymysql库】
2019/06/04 Python
Cython编译python为so 代码加密示例
2019/12/23 Python
Spartoo芬兰:欧洲最大的网上鞋店
2016/08/28 全球购物
大四学生毕业自荐信
2013/11/07 职场文书
服务员岗位职责
2014/01/29 职场文书
高二化学教学反思
2014/01/30 职场文书
社区义诊活动总结
2014/04/30 职场文书
2014报到证办理个人委托书
2014/10/08 职场文书
教师工作表现评语
2014/12/31 职场文书
南京南京观后感
2015/06/02 职场文书
用Python将库打包发布到pypi
2021/04/13 Python