文本框输入文字倒计代码实例

来源:转载

文本框输入文字倒计代码实例:
通常情况下,文本框输入的文字个数并不是无限制的,一般都会限定一个输入最高上限,较为人性化的网站可能会有可输入字数倒计效果,比如还剩余20可以输入这样的提示,下面就通过一个实例介绍一下如何实现此效果。
代码如下:

 

<!DOCTYPE html>

<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元素中文本内容,并设置文本的颜色。
三.相关阅读:
1.focus事件可以参阅jQuery的focus事件一章节。
2.blur事件可以参阅jQuery的blur事件一章节。
3.oninput和onpropertychange可以参阅oninput和onpropertychange事件简单介绍一章节。
4.Math.ceil()可以参阅javascript的Math对象的ceil()方法一章节。


5.html()函数可以参阅jQuery的html()方法一章节。

 


分享给朋友:
您可能感兴趣的文章:
随机阅读: