javascript实时显示文本框输入字数
原创
本章分享一段代码实例，它实现实时显示textarea文本框输入字符数目的功能。
代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>前端部落</title>
<script>
function CountWords(obj, show_id) {
var fullStr = obj.value;
var charCount = fullStr.length;
document.getElementById(show_id).innerHTML = charCount;
}
window.onload = function () {
var txt = document.getElementsByTagName("textarea")[0];
txt.onkeyup = function () {
CountWords(this, 'show')
}
}
</script>
</head>
<body>
<form>
<textarea cols="40" rows="5" name="antzone"></textarea>
</form>
<div id="show">0</div>
</body>
</html>上面的代码实现了我们的要求，下面介绍一下它的实现过程:
一.代码注释:
（1）.function CountWords(obj, show_id) {},第一个参数是文本框对象，第二个参数是显示字符的id。
（2）.var fullStr = obj.value，将文本框的值赋值给变量fullStr。
（3）.var charCount = fullStr.length，获取输入字符的个数。
（4）.document.getElementById(show_id).innerHTML = charCount，字符的数目写到div元素汇总。
（5）.window.onload = function () {}，当文档内容完全加载完毕再去执行函数中的代码。
（6）.var txt = document.getElementsByTagName("textarea")[0]，获取文本框对象。
（7）.txt.onkeyup = function () {
CountWords(this, 'show')
}，为文本框注册onkeyup时间，每一次按键弹起，就会计算一次字符的数目。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读