javascript实时显示文本框输入字数

快乐打工仔 分类:实例代码

本章分享一段代码实例,它实现实时显示textarea文本框输入字符数目的功能。

代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<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时间,每一次按键弹起,就会计算一次字符的数目。

二.相关阅读:

(1).value属性可以参阅javascript textarea.value属性一章节。

(2).length属性可以参阅javascript String length一章节。

(3).innerHTML属性可以参阅innerHTML一章节。

(4).getElementsByTagName()可以参阅document.getElementsByTagName()一章节。

(5).onkeyup事件可以参阅javascript keyup事件一章节。

回复

我来回复
  • 暂无回复内容