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事件一章节。