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中top/parent/frame概述及案例应用
Feb 06 Javascript
使用indexOf等在JavaScript的数组中进行元素查找和替换
Sep 18 Javascript
js截取固定长度的中英文字符的简单实例
Nov 22 Javascript
jQuery+HTML5实现手机摇一摇换衣特效
Jun 05 Javascript
基于JavaScript短信验证码如何实现
Jan 24 Javascript
AngularJS 输入验证详解及实例代码
Jul 28 Javascript
Vue.js实战之Vuex的入门教程
Apr 01 Javascript
vue.js 初体验之Chrome 插件开发实录
May 13 Javascript
layer 关闭指定弹出层的例子
Sep 25 Javascript
JavaScript实现tab栏切换效果
Mar 16 Javascript
微信小程序轮播图swiper代码详解
Dec 01 Javascript
JavaScript实现外溢动态爱心的效果的示例代码
Mar 21 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 curl的深入解析
2013/06/02 PHP
php解压文件代码实现php在线解压
2014/02/13 PHP
关于Laravel-admin的基础用法总结和自定义model详解
2019/10/08 PHP
JavaScript CSS修改学习第二章 样式
2010/02/19 Javascript
JavaScript与Image加载事件(onload)、加载状态(complete)
2011/02/14 Javascript
jquery easyui combox一些实用的小方法
2013/12/25 Javascript
JavaScript学习笔记之Function对象
2015/01/22 Javascript
JavaScript阻止回车提交表单的方法
2015/12/30 Javascript
JS读写CSS样式的方法汇总
2016/08/16 Javascript
bootstrap插件treeview实现全选父节点下所有子节点和反选功能
2017/07/21 Javascript
vue路由嵌套的SPA实现步骤
2017/11/06 Javascript
elementui的默认样式修改方法
2018/02/23 Javascript
Vue 使用 Mint UI 实现左滑删除效果CellSwipe
2018/04/27 Javascript
vue 不使用select实现下拉框功能(推荐)
2018/05/17 Javascript
js 计数排序的实现示例(升级版)
2020/01/12 Javascript
js实现点击上传图片并设为模糊背景
2020/08/02 Javascript
jQuery实现动态加载瀑布流
2020/09/01 jQuery
解决vue项目中出现Invalid Host header的问题
2020/11/17 Javascript
[02:54]DOTA2英雄基础教程 撼地者
2014/01/14 DOTA
简单讲解Python编程中namedtuple类的用法
2016/06/21 Python
R vs. Python 数据分析中谁与争锋?
2017/10/18 Python
python中的闭包函数
2018/02/09 Python
Python Learning 列表的更多操作及示例代码
2018/08/22 Python
浅析Python四种数据类型
2018/09/26 Python
PyCharm鼠标右键不显示Run unittest的解决方法
2018/11/30 Python
Python中list的交、并、差集获取方法示例
2019/08/01 Python
德国机场停车位比较和预订网站:Ich-parke-billiger
2018/01/08 全球购物
SQL Server笔试题
2012/01/10 面试题
个人函授自我鉴定
2014/03/25 职场文书
解放思想演讲稿
2014/09/11 职场文书
村当支部个人对照检查材料思想汇报
2014/10/06 职场文书
2014年教研组工作总结
2014/11/26 职场文书
万里长城导游词
2015/01/30 职场文书
2015年环保局工作总结
2015/05/22 职场文书
Python循环之while无限迭代
2022/04/30 Python
SQL Server中T-SQL标识符介绍与无排序生成序号的方法
2022/05/25 SQL Server