jq实现文字个数限制_js实现文本框输入文字个数限制代码

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

先看看效果图：

代码如下:

文本框输入文字倒计效果代码

*

{

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;

}

$(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("您还可以输入的字数140");

}

})

$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

{

$but.removeClass()

$but.addClass("but");

texts=Math.ceil((maxNum-(str*2+abcnum))/2);

$("p").html("您还可以输入的字数"+texts+"").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("您输入的字数超过了"+texts+"").children("span").css({"color":"red"});

}

}

})

请在下面输入您的文字：

希望本文所述对大家学习javascript程序设计有所帮助。