通常情况下，文本框输入的文字个数并不是无限制的，一般都会限定一个输入最高上限，较为人性化的网站可能会有可输入字数倒计效果，比如还剩余20可以输入这样的提示，下面就通过一个实例介绍一下如何实现此效果。
先看看效果图：
代码如下:
<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="https://www.jb51.net/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> <p>请在下面输入您的文字：</p> <textarea cols="" rows="8"></textarea> </div> </body> </html>
希望本文所述对大家学习javascript程序设计有所帮助。
您可能感兴趣的文章: