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优化尝试小结
Feb 06 Javascript
JavaScript取得鼠标绝对位置程序代码介绍
Sep 16 Javascript
Jquery 模板数据绑定插件的使用方法详解
Jul 08 Javascript
jQuery和AngularJS的区别浅析
Jan 29 Javascript
JavaScript语言精粹经典实例(整理篇)
Jun 07 Javascript
如何解决手机浏览器页面点击不跳转浏览器双击放大网页
Jul 01 Javascript
详解百度百科目录导航树小插件
Jan 08 Javascript
js 性能优化之算法和流程控制
Feb 15 Javascript
详解webpack的配置文件entry与output
Aug 21 Javascript
elementUI中Table表格问题的解决方法
Dec 04 Javascript
微信小程序用户拒绝授权的处理方法详解
Sep 20 Javascript
实例讲解JavaScript 计时事件
Jul 04 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框架功能对照表
2014/10/23 PHP
开启PHP的伪静态模式
2015/12/31 PHP
PHP读书笔记整理_结构语句详解
2016/07/01 PHP
thinkphp整合微信支付代码分享
2016/11/24 PHP
验证控件与Button的OnClientClick事件详细解析
2013/12/04 Javascript
js用typeof方法判断undefined类型
2014/07/15 Javascript
不同编码的页面表单数据乱码问题解决方法
2015/02/15 Javascript
javascript动态设置样式style实例分析
2015/05/13 Javascript
基于JavaScript实现瀑布流效果(循环渐近)
2016/01/27 Javascript
NodeJs的优势和适合开发的程序
2016/08/14 NodeJs
AngularJS监听路由的变化示例代码
2016/09/23 Javascript
jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法
2016/09/23 Javascript
Node.js中DNS模块学习总结
2018/02/28 Javascript
vue 左滑删除功能的示例代码
2019/01/28 Javascript
vue.js实现三级菜单效果
2019/10/19 Javascript
通过实例解析js可枚举属性与不可枚举属性
2020/12/02 Javascript
[27:08]完美世界DOTA2联赛PWL S2 SZ vs Rebirth 第二场 11.21
2020/11/23 DOTA
一波神奇的Python语句、函数与方法的使用技巧总结
2015/12/08 Python
用python实现刷点击率的示例代码
2019/02/21 Python
用scikit-learn和pandas学习线性回归的方法
2019/06/21 Python
python数据持久存储 pickle模块的基本使用方法解析
2019/08/30 Python
python 检查数据中是否有缺失值,删除缺失值的方式
2019/12/02 Python
python 实现从高分辨图像上抠取图像块
2020/01/02 Python
纯CSS3实现滚动的齿轮动画效果
2014/06/05 HTML / CSS
css3使用animation属性实现炫酷效果(推荐)
2020/02/04 HTML / CSS
英国建筑用品在线:Building Supplies Online(BSO)
2018/04/30 全球购物
企业治理工作自我评价
2013/09/26 职场文书
护士岗位职责
2014/02/16 职场文书
2014年师德承诺书
2014/05/23 职场文书
机械专业求职信范文
2014/07/15 职场文书
团组织推优材料
2014/12/29 职场文书
2015年医生个人工作总结
2015/04/25 职场文书
六年级作文之关于梦
2019/10/22 职场文书
电脑无法安装Windows 11怎么办?无法安装Win11的解决方法
2021/11/21 数码科技
Java tomcat手动配置servlet详解
2021/11/27 Java/Android
实战Python爬虫爬取酷我音乐
2022/04/11 Python