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 组合form元素为json格式,asp.net反序列化
Jul 09 Javascript
js 距离某一时间点时间是多少实现代码
Oct 14 Javascript
js+html5实现canvas绘制镂空字体文本的方法
Jun 05 Javascript
js实现瀑布流的三种方式比较
Jun 28 Javascript
JavaScript必知必会(三) String .的方法来自何方
Jun 08 Javascript
使用jQuery的toggle()方法对HTML标签进行显示、隐藏的方法(示例)
Sep 01 Javascript
微信小程序中显示html格式内容的方法
Apr 25 Javascript
浅谈开发eslint规则
Oct 01 Javascript
微信小程序利用Canvas绘制图片和竖排文字详解
Jun 25 Javascript
vue 实现购物车总价计算
Nov 06 Javascript
浅谈Ant Design Pro 菜单自定义 icon
Nov 17 Javascript
Vue实现跑马灯样式文字横向滚动
Nov 23 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
PHP中for循环语句的几种变型
2006/11/26 PHP
Mysql数据库操作类( 1127版,提供源码下载 )
2010/12/02 PHP
php skymvc 一款轻量、简单的php
2011/06/28 PHP
YiiFramework入门知识点总结(图文教程)
2015/12/28 PHP
Zend Framework教程之Bootstrap类用法概述
2016/03/14 PHP
Yii视图操作之自定义分页实现方法
2016/07/14 PHP
PHP编程实现计算抽奖概率算法完整实例
2017/08/09 PHP
解决Laravel 不能创建 migration 的问题
2019/10/09 PHP
解决laravel groupBy 对查询结果进行分组出现的问题
2019/10/09 PHP
HTML颜色选择器实现代码
2010/11/23 Javascript
jquery中防刷IP流量软件影响统计的一点对策
2011/07/10 Javascript
js函数模拟显示桌面.scf程序示例
2014/04/20 Javascript
jquery带下拉菜单和焦点图代码分享
2015/08/24 Javascript
详解Bootstrap四种图片样式
2016/01/04 Javascript
jQuery插件编写步骤详解
2016/06/03 Javascript
AngularJS实现数据列表的增加、删除和上移下移等功能实例
2016/09/05 Javascript
JS中用三种方式实现导航菜单中的二级下拉菜单
2016/10/31 Javascript
vue路由分文件拆分管理详解
2020/08/13 Javascript
[52:40]完美世界DOTA2联赛PWL S2 Magma vs GXR 第一场 11.29
2020/12/02 DOTA
python中MySQLdb模块用法实例
2014/11/10 Python
Python中的tuple元组详细介绍
2015/02/02 Python
详解Django中的权限和组以及消息
2015/07/23 Python
python3爬虫学习之数据存储txt的案例详解
2019/04/24 Python
Python 使用PyQt5 完成选择文件或目录的对话框方法
2019/06/27 Python
Python如何存储数据到json文件
2020/03/09 Python
Python基于stuck实现scoket文件传输
2020/04/02 Python
关于keras中keras.layers.merge的用法说明
2020/05/23 Python
python交互模式基础知识点学习
2020/06/18 Python
纯CSS实现颜色渐变效果(包含环形渐变、线性渐变、彩虹效果等)
2014/05/07 HTML / CSS
全球性的在线商店:Vogca
2019/05/10 全球购物
J2EE模式面试题
2016/10/11 面试题
法学院方阵解说词
2014/01/29 职场文书
革命英雄事迹演讲稿
2014/09/13 职场文书
学习朴航瑛老师爱岗敬业先进事迹思想汇报
2014/09/17 职场文书
庆祝三八妇女节标语
2014/10/09 职场文书
Vue的列表之渲染,排序,过滤详解
2022/02/24 Vue.js