你的位置:首页 > Java教程

[Java教程]jQuery实现的输入文本计数功能代码

jQuery实现的输入文本计数功能代码:
在一些比较人性化的留言回复功能中,都有这样的设计,那就是当输入文本的时候,能够实现计数功能,可以提示用户还能能够输入多少文字,这样可以便于用户选择更合适的语言描述,下面就是一段能够实现此功能的代码,需要的朋友可以进行一下借鉴。
代码如下:

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">fieldset{ width:800px;  margin-left:300px;}legend{ font-sixe:16px; }#num{ font-size:28px; font-weight:800}</style><script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script><script type="text/javascript"> $(function(){  $("#content").focus(function(){   if($(this).val()==this.defaultValue) {    $(this).val("");   }  }).blur(function(){   if($(this).val()=='') {    $(this).val(this.defaultValue);   }  })  $("#content").keyup(function(){   var words_num = 140 - $(this).val().length;   if(words_num < 0) {    $("font").css('color','red').text(words_num);    $(this).val($(this).val().substring(0,139))  }  else{    $("font").text(words_num);   }  }) }); </script> </head> <body> <fieldset>  <legend>发布框</legend>  <form action="#" id="form1"> 您还可以输入<span id="num"><font color="green">140</font></span>个字  <textarea cols="96" rows="8" id="content">蚂蚁部落欢迎您</textarea>  <input type="button" id="send" value="发布"/> </form> </fieldset> </body> </html> 

以上代码实现了我们的要求,可以实现输入文字倒计时效果,下面介绍一下它的实现过程。
一.代码注释:
1.$(function(){}),文档结构完全加载完成再去执行函数中的代码。
2.$("#content").focus(function(){ 
    if($(this).val()==this.defaultValue) { 
      $(this).val(""); 
    } 
})
为文本框注册focus事件处理函数,此函数的功能可以判断文本框中的内容是否为默认值,如果是则清空。
3.blur(function(){ 
    if($(this).val()=='') { 
      $(this).val(this.defaultValue); 
    } 
}) 
为文本框注册blur事件处理函数,此函数可以判断文本框的值是否为空,如果是,则将文本框的内容设置为原来默认值。
4.$("#content").keyup(function(){}),为文本框注册keyup事件处理函数。
5.var words_num = 140 - $(this).val().length,获取还可以输入文字的个数。
6.if(words_num < 0) { 
   $("font").css('color','red').text("0");
   $(this).val($(this).val().substring(0,139))
}
如果文字已经超出,那么就将还可以输入的文字设置为0,并将其设置为红色,并删除超出的文本。
7.else{ 
  $("font").text(words_num); 

如果没有超出,则显示还可以输入的文字数目。
二.相关阅读:
1.focus事件可以参阅jQuery的focus事件一章节。
2.defaultValue属性可以参阅javascript的textarea.defaultValue属性一章节。 
3.val()函数可以参阅jQuery的val()方法一章节。
4.blur事件可以参阅jQuery的blur事件一章节。
5.keyup事件可以参阅jQuery的keyup事件一章节。
6.css()函数可以参阅jQuery的css()方法一章节。
7.text()函数可以参阅jQuery的text()方法一章节。
8.substring()函数可以参阅javascript的String对象的substring()方法一章节。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=13362

更多内容可以参阅:http://www.softwhy.com/jquery/