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 相关文章推荐
不错的新闻标题颜色效果
Dec 10 Javascript
jQuery插件实现屏蔽单个元素使用户无法点击
Apr 12 Javascript
如何减少浏览器的reflow和repaint
Feb 26 Javascript
js 获取站点应用名的简单实例
Aug 18 Javascript
微信小程序 数组(增,删,改,查)等操作实例详解
Jan 05 Javascript
实例讲解javascript实现异步图片上传方法
Dec 05 Javascript
图文介绍Vue父组件向子组件传值
Feb 17 Javascript
JS实现读取xml内容并输出到div中的方法示例
Apr 19 Javascript
微信小程序使用wxParse解析html的方法教程
Jul 06 Javascript
JS实现的全选、全不选及反选功能【案例】
Feb 19 Javascript
微信小程序实现人脸识别登陆的示例代码
Apr 02 Javascript
如何在JavaScript中使用localStorage详情
Feb 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中数据类型转换的三种方式
2015/04/02 PHP
浅析PHP中Session可能会引起并发问题
2015/07/23 PHP
php ucwords() 函数将字符串中每个单词的首字符转换为大写(实现代码)
2016/05/12 PHP
PHP开发api接口安全验证操作实例详解
2020/03/26 PHP
JQuery入门—JQuery程序的代码风格详细介绍
2013/01/03 Javascript
jQuery实现的网页竖向菜单效果代码
2015/08/26 Javascript
jquery插件ajaxupload实现文件上传操作
2015/12/09 Javascript
实用又漂亮的BootstrapValidator表单验证插件
2016/05/30 Javascript
JS原型与原型链的深入理解
2017/02/15 Javascript
tab栏切换原理
2017/03/22 Javascript
关于Bootstrap按钮组件消除黄框的方法
2017/05/19 Javascript
jquery实现图片轮播器
2017/05/23 jQuery
react开发教程之React 组件之间的通信方式
2017/08/12 Javascript
angular2 ng2-file-upload上传示例代码
2018/08/23 Javascript
angular4强制刷新视图的方法
2018/10/09 Javascript
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
2019/05/13 jQuery
如何在vue 中引入使用jquery
2020/11/10 jQuery
跟老齐学Python之使用Python操作数据库(1)
2014/11/25 Python
使用Python中的greenlet包实现并发编程的入门教程
2015/04/16 Python
Python安装第三方库及常见问题处理方法汇总
2016/09/13 Python
Python3实现对列表按元组指定列进行排序的方法分析
2018/12/22 Python
在pycharm中使用pipenv创建虚拟环境和安装django的详细教程
2020/11/30 Python
pycharm配置QtDesigner的超详细方法
2021/01/25 Python
HTML5 常用语法一览(列举不支持的属性)
2010/01/26 HTML / CSS
Html5移动端适配IphoneX等机型的方法
2019/06/25 HTML / CSS
Canvas波浪花环的示例代码
2020/08/21 HTML / CSS
Chemist Warehouse中文网:澳洲连锁大药房
2021/02/05 全球购物
标准毕业生自荐信范文
2013/11/04 职场文书
军训自我鉴定100字
2014/02/13 职场文书
安全保证书怎么写
2015/02/28 职场文书
初三英语教学反思
2016/02/15 职场文书
深度学习详解之初试机器学习
2021/04/14 Python
Python入门之基础语法详解
2021/05/11 Python
python 爬取京东指定商品评论并进行情感分析
2021/05/27 Python
pytorch 6 batch_train 批训练操作
2021/05/28 Python
关于EntityWrapper的in用法
2022/03/22 Java/Android