jQuery实现的输入文本计数功能代码
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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/
以上是关于jQuery实现的输入文本计数功能代码的主要内容，如果未能解决你的问题，请参考以下文章