JavaScript实时统计文本框字符数的实现方法
作者:纸飞机时间:2026-10-29 16:00:06浏览:89
本文介绍如何使用JavaScript实现实时统计文本框中输入字符数的功能。通过监听onkeyup事件,获取用户输入内容并计算长度,同时利用正则表达式处理非字母数字字符,将空格替换后统计有效字符数量,最终在指定区域显示结果。
JavaScript实时统计字符数实现
利用JavaScript实现实时统计用户当前输入字符数的函数代码如下:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JavaScript统计字符数</title>
<script language="javascript">
function CountWords(obj, show_id){
var fullStr = obj.value;
var charCount = fullStr.length;
var rExp = /[^A-Za-z0-9]/gi;
var spacesStr = fullStr.replace(rExp, ' ');
var cleanedStr = spacesStr + ' ';
do{
var old_str = cleanedStr;
cleanedStrcleanedStr = cleanedStr.replace(' ', ' ');
}while( old_str != cleanedStr );
var splitString = cleanedStr.split(' ');
document.getElementById(show_id).innerHTML=charCount;
}
</script>
</head>
<body>
<form>
<textarea cols="40" rows="5" name="x" onkeyup="CountWords(this,'show')" />
</textarea>
</form>
<div id="show">0</div>
</body>
</html>
JavaScript实现字符数统计十分简单,上述分享的代码可直接使用,希望对各位的学习有所帮助。
作者最新文章
JS动态构建复杂嵌套JSON对象的方法
2026-11-05 15:41:52
JS负数取余为什么是负数?详解余数与模运算区别
2026-11-05 13:34:41
JS 解压出现乱码或报错怎么解决?
2026-11-05 12:32:38
JS 中 startsWith、indexOf 与正则判断字符串前缀的对比
2026-11-04 22:19:43
JS解析Excel后怎么将数据转换为JSON格式
2026-11-04 20:58:28
