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提取URL的搜索字符串中的参数(自定义函数实现)
Jan 22 Javascript
js 自动播放的实例代码
Nov 19 Javascript
AngularJS内置指令
Feb 04 Javascript
jquery实现初次打开有动画效果的网页TAB切换代码
Sep 06 Javascript
详解从angular-cli:1.0.0-beta.28.3升级到@angular/cli:1.0.0
May 22 Javascript
详解vue父子组件间传值(props)
Jun 29 Javascript
原生JS实现移动端web轮播图详解(结合Tween算法造轮子)
Sep 10 Javascript
vue 运用mock数据的示例代码
Nov 07 Javascript
vue导航栏部分的动态渲染实例
Nov 01 Javascript
使用Webpack 搭建 Vue3 开发环境过程详解
Jul 28 Javascript
vue封装自定义指令之动态显示title操作(溢出显示,不溢出不显示)
Nov 12 Javascript
vue3.0+vue-router+element-plus初实践
Dec 02 Vue.js
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
Apache+php+mysql在windows下的安装与配置图解(最新版)
2008/11/30 PHP
记录PHP错误日志 display_errors与log_errors的区别
2012/10/09 PHP
设置php页面编码的两种方法示例介绍
2014/03/03 PHP
PHP使用curl函数发送Post请求的注意事项
2016/11/26 PHP
PHP后端银联支付及退款实例代码
2017/06/23 PHP
php数组遍历类与用法示例
2019/05/24 PHP
javascript中判断一个值是否在数组中并没有直接使用
2012/12/17 Javascript
extjs两个tbar问题探讨
2013/08/08 Javascript
JavaScript中使用document.write向页面输出内容实例
2014/10/16 Javascript
javascript Deferred和递归次数限制实例
2014/10/21 Javascript
原生js实现类似弹窗抖动效果
2015/04/02 Javascript
实例代码讲解jquery easyui动态tab页
2015/11/17 Javascript
JavaScript中定义类的方式详解
2016/01/07 Javascript
学习Javascript面向对象编程之封装
2016/02/23 Javascript
基于canvas粒子系统的构建详解
2017/08/31 Javascript
JavaScript实现百度搜索框效果
2020/03/26 Javascript
解决Layui数据表格中checkbox位置不居中的方法
2018/08/15 Javascript
谈谈我在vue-cli3中用预渲染遇到的坑
2020/04/22 Javascript
通过angular CDK实现页面元素拖放的步骤详解
2020/07/01 Javascript
VUE 实现element upload上传图片到阿里云
2020/08/12 Javascript
[01:09]2014DOTA2国际邀请赛 TI4西雅图DOTA2 中国美女coser加油助威
2014/07/20 DOTA
使用Python的Supervisor进行进程监控以及自动启动
2014/05/29 Python
Python导出DBF文件到Excel的方法
2015/07/25 Python
Python+Selenium自动化实现分页(pagination)处理
2017/03/31 Python
Python  unittest单元测试框架的使用
2018/09/08 Python
使用django实现一个代码发布系统
2019/07/18 Python
Python 实现国产SM3加密算法的示例代码
2020/09/21 Python
canvas绘制树形结构可视图形的实现
2020/04/03 HTML / CSS
澳大利亚宠物食品和药物在线:Jumbo Pets
2018/03/24 全球购物
Charlotte Tilbury澳大利亚官网:英国美妆品牌
2018/10/05 全球购物
机关党建工作汇报材料
2014/08/20 职场文书
材料员岗位职责
2015/02/10 职场文书
接待员岗位职责范本
2015/04/15 职场文书
2015年售票员工作总结
2015/04/29 职场文书
运动会广播稿20字
2015/08/19 职场文书
win10电脑关机快捷键是哪个 win10快速关机的几种方法
2022/08/14 数码科技