文本框输入文字倒计代码实例
文本框输入文字倒计代码实例:
通常情况下，文本框输入的文字个数并不是无限制的，一般都会限定一个输入最高上限，较为人性化的网站可能会有可输入字数倒计效果，比如还剩余20可以输入这样的提示，下面就通过一个实例介绍一下如何实现此效果。
代码如下:
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>文本框输入文字倒计效果代码-蚂蚁部落</title>
<style type="text/css">
*
{
margin:0;
padding:0;
}
.box
{
width:500px;
margin:10px auto;
}
p span
{
color:#069;
font-weight:bold;
}
textarea
{
width:300px;
}
.textColor
{
background-color:#0C9;
}
.grey
{
padding:5px;
color:#FFF;
background-color:#CCCCCC;
}
</style>
<script type="text/javascript" src="http://www.softwhy.com/mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
var $tex=$(".tex");
var $but=$(".but");
var ie=jQuery.support.htmlSerialize;
var str=0;
var abcnum=0;
var maxNum=280;
var texts=0;
$tex.val("");
$tex.focus(function(){
if($tex.val()=="")
{
$("p").html("您还可以输入的字数<span>140</span>");
}
})
$tex.blur(function(){
if($tex.val() == "")
{
$("p").html("请在下面输入您的文字：");
}
})
if(ie)
{
$tex[0].oninput = changeNum;
}
else
{
$tex[0].onpropertychange = changeNum;
}
function changeNum()
{
//汉字的个数
str=($tex.val().replace(/\w/g,"")).length;
//非汉字的个数
abcnum=$tex.val().length-str;
total=str*2+abcnum;
if(str*2+abcnum<maxNum||str*2+abcnum==maxNum)
{
$but.removeClass()
$but.addClass("but");
texts=Math.ceil((maxNum-(str*2+abcnum))/2);
$("p").html("您还可以输入的字数<span>"+texts+"</span>").children().css({"color":"blue"});
}
else if(str*2+abcnum>maxNum)
{
$but.removeClass("")
$but.addClass("grey");
texts =Math.ceil(((str*2+abcnum)-maxNum)/2);
$("p").html("您输入的字数超过了<span>"+texts+"</span>").children("span").css({"color":"red"});
}
}
})
</script>
</head>
<body>
<div class="box">
<p>请在下面输入您的文字：</p>
<textarea name="weibao" class="tex" cols="" rows="8"></textarea>
</div>
</body>
</html>
一.实现原理:
首 先设定了一个最大可以输入的文字数量。在代码中规定一个汉字相当于两个英文字符长度，并且为textarea文本框注册oninput和 onpropertychange事件处理函数，这两个事件的作用是一样的都可以检测文本框中内容的改变，一旦内容发生改变就会触发这两个事件，之所以是 两个事件，是为了浏览器兼容性问题。事件处理函数可以检测当前文本框中字符的长度，并给出相应的提示，这里不多介绍了，具体可以看代码注释。
二.代码注释:
1.$(function(){})，当文档结构加载完毕再去执行函数中的代码，是$(document).ready(function(){})的简写。
2.var $tex=$(".tex")，取得class属性值为.tex的jquery对象集合。
3.var ie=jQuery.support.htmlSerialize，用来进行浏览器兼容，在IE下返回值为false，其他浏览器为true。
4.var str=0，声明一个变量，并将赋值为0，在后面会用到。
5.var abcnum=0，声明一个变量，并将赋值为0，在后面会用到。
6.var maxNum=280，规定可以输入内容的最大长度，注意这里长度时指英文字符的长度。
7.var texts=0，声明一个变量，并将赋值为0，在后面会用到。
8.$tex.val("")，将textarea文本框中的内容清空。
9.$tex.focus(function(){})，为文本框注册focus事件处理函数。
10.if($tex.val()==""){$("p").html("您还可以输入的字数<span>140</span>");} ，如果文本框中的内容为空，那么僵p中的文本设置为"您还可以输入的字数140"，注意140个是指的汉字的个数，一个汉字占占两个字节，一个英文字符占一个字节。
11.$tex.blur(function(){})，为文本框注册blur事件处理函数。
12.if($tex.val() == ""){$("p").html("请在下面输入您的文字：");}，当文本框失去焦点的时候，会将p元素的文本设置为"请在下面输入您的文字："。
13.if(ie),如果是非IE浏览器。
14.$tex[0].oninput=changeNum，$tex[0]可以将jquery元素转换DOM元素。为文本框的oninput事件注册事件处理函数。
15.else{$tex[0].onpropertychange=changeNum;}，如果是IE浏览器，则为文本框的onpropertychange事件注册事件处理函数。
16.function changeNum(){}，此函数是oninput事件和onpropertychange事件的处理函数，用来处理输入文本倒计问题。
17.str=($tex.val().replace(/\w/g,"")).length，可以计算出输入汉字的个数。
18.abcnum=$tex.val().length-str，可以计算出输入内容除汉字外其他字符的个数。
19.total=str*2+abcnum，一个汉字相当于2个英文字符，这样就换算成英文字符的长度。
20.if(str*2+abcnum<maxNum||str*2+abcnum==maxNum)，判断当前输入的长度是否小于等于规定的最大长度。
21.texts=Math.ceil((maxNum-(str*2+abcnum))/2)，计算出还可以输入汉字的数量。
22.$("p").html("您还可以输入的字数<span>"+texts+"</span>").children().css({"color":"blue"})，设置p元素中的文本内容，并设置文本的颜色。
23.else if(str*2+abcnum>maxNum)，如果超过规定长度。
24.texts=Math.ceil(((str*2+abcnum)-maxNum)/2)，计算出超出的个数。
25.$("p").html("您输入的字数超过了<span>"+texts+"</span>").children("span").css({"color":"red"})，设置p元素中文本内容，并设置文本的颜色。
首 先设定了一个最大可以输入的文字数量。在代码中规定一个汉字相当于两个英文字符长度，并且为textarea文本框注册oninput和 onpropertychange事件处理函数，这两个事件的作用是一样的都可以检测文本框中内容的改变，一旦内容发生改变就会触发这两个事件，之所以是 两个事件，是为了浏览器兼容性问题。事件处理函数可以检测当前文本框中字符的长度，并给出相应的提示，这里不多介绍了，具体可以看代码注释。
二.代码注释:
1.$(function(){})，当文档结构加载完毕再去执行函数中的代码，是$(document).ready(function(){})的简写。
2.var $tex=$(".tex")，取得class属性值为.tex的jquery对象集合。
3.var ie=jQuery.support.htmlSerialize，用来进行浏览器兼容，在IE下返回值为false，其他浏览器为true。
4.var str=0，声明一个变量，并将赋值为0，在后面会用到。
5.var abcnum=0，声明一个变量，并将赋值为0，在后面会用到。
6.var maxNum=280，规定可以输入内容的最大长度，注意这里长度时指英文字符的长度。
7.var texts=0，声明一个变量，并将赋值为0，在后面会用到。
8.$tex.val("")，将textarea文本框中的内容清空。
9.$tex.focus(function(){})，为文本框注册focus事件处理函数。
10.if($tex.val()==""){$("p").html("您还可以输入的字数<span>140</span>");} ，如果文本框中的内容为空，那么僵p中的文本设置为"您还可以输入的字数140"，注意140个是指的汉字的个数，一个汉字占占两个字节，一个英文字符占一个字节。
11.$tex.blur(function(){})，为文本框注册blur事件处理函数。
12.if($tex.val() == ""){$("p").html("请在下面输入您的文字：");}，当文本框失去焦点的时候，会将p元素的文本设置为"请在下面输入您的文字："。
13.if(ie),如果是非IE浏览器。
14.$tex[0].oninput=changeNum，$tex[0]可以将jquery元素转换DOM元素。为文本框的oninput事件注册事件处理函数。
15.else{$tex[0].onpropertychange=changeNum;}，如果是IE浏览器，则为文本框的onpropertychange事件注册事件处理函数。
16.function changeNum(){}，此函数是oninput事件和onpropertychange事件的处理函数，用来处理输入文本倒计问题。
17.str=($tex.val().replace(/\w/g,"")).length，可以计算出输入汉字的个数。
18.abcnum=$tex.val().length-str，可以计算出输入内容除汉字外其他字符的个数。
19.total=str*2+abcnum，一个汉字相当于2个英文字符，这样就换算成英文字符的长度。
20.if(str*2+abcnum<maxNum||str*2+abcnum==maxNum)，判断当前输入的长度是否小于等于规定的最大长度。
21.texts=Math.ceil((maxNum-(str*2+abcnum))/2)，计算出还可以输入汉字的数量。
22.$("p").html("您还可以输入的字数<span>"+texts+"</span>").children().css({"color":"blue"})，设置p元素中的文本内容，并设置文本的颜色。
23.else if(str*2+abcnum>maxNum)，如果超过规定长度。
24.texts=Math.ceil(((str*2+abcnum)-maxNum)/2)，计算出超出的个数。
25.$("p").html("您输入的字数超过了<span>"+texts+"</span>").children("span").css({"color":"red"})，设置p元素中文本内容，并设置文本的颜色。
后来都会美好的！
