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 .ajax 在IE下卡死问题的解决方法
Oct 26 Javascript
JavaScript CSS修改学习第一章 查找位置
Feb 19 Javascript
关于eval 与new Function 到底该选哪个?
Apr 17 Javascript
分析js闭包引起的事件注册问题
Mar 29 Javascript
微信小程序 详解页面跳转与返回并回传数据
Feb 13 Javascript
js实现3D图片展示效果
Mar 09 Javascript
Bootstrap 3多级下拉菜单实例
Nov 23 Javascript
Bootstrap table表格初始化表格数据的方法
Jul 25 Javascript
vue使用原生js实现滚动页面跟踪导航高亮的示例代码
Oct 25 Javascript
vue2路由基本用法实例分析
Mar 06 Javascript
JS实现密码框效果
Sep 10 Javascript
详解vue3.0 的 Composition API 的一种使用方法
Oct 26 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 分库分表hash算法
2009/11/12 PHP
PHP抓屏函数实现屏幕快照代码分享
2014/01/02 PHP
谈谈从phpinfo中能获取哪些值得注意的信息
2017/03/28 PHP
js实现在字符串中提取数字
2013/11/05 Javascript
document.getElementById获取控件对象为空的解决方法
2013/11/20 Javascript
Js保留小数点的4种效果实现代码分享
2014/04/12 Javascript
在Ubuntu上安装最新版本的Node.js
2014/07/14 Javascript
RequireJS使用注意细节
2016/05/15 Javascript
Bootstrap 最常用的JS插件系列总结(图片轮播、标签切换等)
2016/07/14 Javascript
es6学习笔记之Async函数的使用示例
2017/05/11 Javascript
Ionic项目中Native Camera的使用方法
2017/06/07 Javascript
ComboBox(下拉列表框)通过url加载调用远程数据的方法
2017/08/06 Javascript
解决npm安装Electron缓慢网络超时导致失败的问题
2018/02/06 Javascript
js实现三角形粒子运动
2020/09/22 Javascript
Python实现MySQL操作的方法小结【安装,连接,增删改查等】
2017/07/12 Python
用python统计代码行的示例(包括空行和注释)
2018/07/24 Python
Python用5行代码写一个自定义简单二维码
2018/10/21 Python
解决Pycharm下面出现No R interpreter defined的问题
2018/10/29 Python
Python实战购物车项目的实现参考
2019/02/20 Python
Python PIL图片添加字体的例子
2019/08/22 Python
pycharm远程连接vagrant虚拟机中mariadb数据库
2020/06/05 Python
python如何安装下载后的模块
2020/07/03 Python
Python中random模块常用方法的使用教程
2020/10/04 Python
Python+OpenCV检测灯光亮点的实现方法
2020/11/02 Python
Dr. Martens马汀博士德国官网:马丁靴鼻祖
2019/12/26 全球购物
介绍一下HTTP、HTTPS和SSL
2012/12/16 面试题
班级聚会策划书
2014/01/16 职场文书
幼儿园保教管理制度
2014/02/03 职场文书
电子信息专业自荐书
2014/02/04 职场文书
平安家庭示范户事迹
2014/06/02 职场文书
单位委托书怎么写
2014/08/02 职场文书
公司董事任命书
2015/09/21 职场文书
找规律教学反思
2016/02/23 职场文书
Vue鼠标滚轮滚动切换路由效果的实现方法
2021/08/04 Vue.js
mysql中关键词exists的用法实例详解
2022/06/10 MySQL
MySQL使用IF语句及用case语句对条件并结果进行判断 
2022/09/23 MySQL