<html>
<head>
<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=
"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>