惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

人人都是产品经理
人人都是产品经理
博客园_首页
博客园 - 三生石上(FineUI控件)
V
Visual Studio Blog
Hugging Face - Blog
Hugging Face - Blog
美团技术团队
小众软件
小众软件
T
Tailwind CSS Blog
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
月光博客
月光博客
有赞技术团队
有赞技术团队
WordPress大学
WordPress大学
博客园 - 【当耐特】
Apple Machine Learning Research
Apple Machine Learning Research
罗磊的独立博客
V
V2EX
酷 壳 – CoolShell
酷 壳 – CoolShell
IT之家
IT之家
量子位
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
Recent Announcements
Recent Announcements
M
MIT News - Artificial intelligence
阮一峰的网络日志
阮一峰的网络日志
The GitHub Blog
The GitHub Blog

月光博客

AI编程从零开始:环境配置到开发调试-月光博客 母亲被保健品诈骗-月光博客 向身体低头,向岁月妥协:我的高血压“还债日记” -月光博客 月光博客电子书:《信息安全指南》 谷歌发布2025年度搜索排行榜 中国2025社会热点大事记 2025年十大流行语发布 7天3次,骗子骗走我母亲95万元 “技术男”设三重安全墙,母亲95万存款还是被骗走了 电信诈骗后的复盘:母亲的95万元,是怎么从手机银行里消失的 母亲被电信诈骗95万元的全过程 阿根廷警察被谷歌街景相机拍到裸照 网信办开展“清朗·整治恶意挑动负面情绪问题”专项行动 翟欣欣敲诈勒索案一审获刑12年 《绝命毒师》影评:力工觉醒后的梭哈至死 《人工智能生成合成内容标识办法》正式施行 用AI分析你的财务信息 腾讯子公司实习HR怒怼求职者后被开除 OpenAI发布最强模型GPT-5,免费向所有用户开放 用AI解构你的日记 用AI分析你的游戏偏好 用AI分析你的观影偏好 用AI分析你的听歌偏好 《白鹿原》人物分析:乱世浮沉中的人性剖析 乌托邦的捷径:让AI治理“失败国家” 苹果AI的“路径错误”:为什么它在大模型时代掉队了? 《暗黑破坏神3》第35赛季开荒指南 我对特朗普的看法 欧·亨利十大经典小说鉴赏 HBO电视剧《最后生还者》第二季影评
在JavaScript中实现统计文本框Textarea字数
月光 · 2009-06-14 · via 月光博客

现在流行的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中实现统计文本框Textarea字数