js實現(xiàn)文本框輸入文字個數(shù)限制代碼
更新時間:2015年12月25日 08:22:34 作者:我是代碼努力
這篇文章主要介紹了js實現(xiàn)文本框輸入文字個數(shù)限制代碼,文本框輸入的文字個數(shù)并不是無限制的,一般都會限定一個輸入最高上限,如何限制,請看本文
通常情況下,文本框輸入的文字個數(shù)并不是無限制的,一般都會限定一個輸入最高上限,較為人性化的網(wǎng)站可能會有可輸入字數(shù)倒計效果,比如還剩余20可以輸入這樣的提示,下面就通過一個實例介紹一下如何實現(xiàn)此效果。
先看看效果圖:
代碼如下:
<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("您還可以輸入的字數(shù)<span>140</span>"); } }) $tex.blur(function(){ if($tex.val() == "") { $("p").html("請在下面輸入您的文字:"); } }) if(ie) { $tex[0].oninput = changeNum; } else { $tex[0].onpropertychange = changeNum; } function changeNum() { //漢字的個數(shù) str=($tex.val().replace(/\w/g,"")).length; //非漢字的個數(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("您還可以輸入的字數(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("您輸入的字數(shù)超過了<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>
希望本文所述對大家學習javascript程序設計有所幫助。
相關(guān)文章
javascript 使用for循環(huán)時該注意的問題-附問題總結(jié)
所謂for循環(huán)就是重復的執(zhí)行一段代碼,for循環(huán)也是希望在創(chuàng)建循環(huán)時常會用到的工具,這篇內(nèi)容主要給大家介紹javascript 使用for循環(huán)時該注意的問題-附問題總結(jié),需要的朋友可以參考下2015-08-08JavaScript 實現(xiàn)HTML DOM增刪改查操作的常見方法詳解
這篇文章主要介紹了JavaScript 實現(xiàn)HTML DOM增刪改查操作,結(jié)合實例形式分析了JavaScript針對HTML DOM元素增刪改查常見操作技巧與使用注意事項,需要的朋友可以參考下2020-01-01