通常情況下，文本框輸入的文字個(gè)數(shù)并不是無限制的，一般都會(huì)限定一個(gè)輸入最高上限，較為人性化的網(wǎng)站可能會(huì)有可輸入字?jǐn)?shù)倒計(jì)效果，比如還剩余20可以輸入這樣的提示，下面就通過一個(gè)實(shí)例介紹一下如何實(shí)現(xiàn)此效果。
先看看效果圖：
代碼如下:
<html> <head> <title>文本框輸入文字倒計(jì)效果代碼</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("您還可以輸入的字?jǐn)?shù)<span>140</span>"); } }) $tex.blur(function(){ if($tex.val() == "") { $("p").html("請(qǐng)?jiān)谙旅孑斎肽奈淖郑?); } }) if(ie) { $tex[0].oninput = changeNum; } else { $tex[0].onpropertychange = changeNum; } function changeNum() { //漢字的個(gè)數(shù) str=($tex.val().replace(//w/g,"")).length; //非漢字的個(gè)數(shù) 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("您還可以輸入的字?jǐn)?shù)<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("您輸入的字?jǐn)?shù)超過了<span>"+texts+"</span>").children("span").css({"color":"red"}); } } }) </script> </head> <body> <div class="box"> <p>請(qǐng)?jiān)谙旅孑斎肽奈淖郑?lt;/p> <textarea name="weibao" class="tex" cols="" rows="8"></textarea> </div> </body> </html>希望本文所述對(duì)大家學(xué)習(xí)javascript程序設(shè)計(jì)有所幫助。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
