文本框輸入數字倒計實例代碼:一般情況下，文本框中文字的個數並不是無限的，也就是說具有一定的限制，在人性化程度較好的網站一般有輸入文字倒計效果，這樣可以便於瀏覽者組織語言，下麵就簡單介紹一下如何實現此效果。代碼實例如下: 文本框輸入文字倒計實例代碼-螞蟻部落 （50字以內） 以上代碼實現...
文本框輸入數字倒計實例代碼:
一般情況下，文本框中文字的個數並不是無限的，也就是說具有一定的限制，在人性化程度較好的網站一般有輸入文字倒計效果，這樣可以便於瀏覽者組織語言，下麵就簡單介紹一下如何實現此效果。
代碼實例如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title>文本框輸入文字倒計實例代碼-螞蟻部落</title> <style type="text/css"> #spOwner_Name{color:#808080} </style> <script type="text/javascript"> function textLimitCheckSj(thisArea, maxLength, SpanId) { var str=thisArea.value; if(getChrLen(str, maxLength)>maxLength*2) { thisArea.value = str.substring(0,x-1); } else { var leftStr='(剩餘字數:'+Math.floor((maxLength*2-getChrLen(str, maxLength))/2)+')'; document.getElementById(SpanId).innerHTML=leftStr; } } function getChrLen(str,maxLength) { var realLength=0; var len=str.length; var charCode=-1; x=0; for(;(x<len)&&(realLength<=maxLength*2);x++) { charCode=str.charCodeAt(x); if(charCode>=0&&charCode<=128) { realLength+=1; } else { realLength+=2; } } return realLength; } window.onload=function() { var ocontent=document.getElementById("content"); ocontent.onkeyup=function(){textLimitCheckSj(this,50,'spOwner_Name')} } </script> <body> <textarea id="content"></textarea> <span id="spOwner_Name"><em>（50字以內）</em></span> </body> </html>
以上代碼實現了我們想要的效果，當輸入內容的時候，能夠實時提醒還可以輸入的長度，下麵就簡單介紹一下實現過程。
一.實現原理:
此代碼實現的是計算可以輸入漢字的個數,在unicode編碼中，英文和數字在0-128範圍內，只占一個位元組，漢字占兩個位元組。當鍵盤按鍵鬆開時就會觸發onkeyup事件，事件處理函數能夠計算當前輸入字元的長度，並且將剩餘的可以輸入的漢字個數寫入span中，原理大致如此，下麵對代碼進行一下詳細註釋。
二.代碼註釋:
1.function textLimitCheckSj(thisArea,maxLength,SpanId){}，此函數用作onkeyup事件處理函數，第一個參數是textarea文本框對象，第二個是輸入漢字的最大個數，第三個是span元素的id。
2.var str=thisArea.value，將輸入到文本框的內容賦值給變數str。
3.if(getChrLen(str,maxLength)>maxLength*2)，判斷輸入的長度是否超出規定，50個是漢字的個數，一個漢字占兩個位元組。
4.thisArea.value=str.substring(0,x-1)，用來截取字元串，在這裡也就是刪除最後一個輸入的字元。
5. var leftStr='(剩餘字數:'+Math.floor((maxLength*2-getChrLen(str, maxLength))/2)+')'，計算出剩餘可以輸入的漢字數，並組織成字元串。
6.document.getElementById(SpanId).innerHTML=leftStr，將組織好的字元寫入span。
7.function getChrLen(str,maxLength) {}，此函數用來返回字元串的長度，第二個參數是字元串，第二個是最大漢字的個數。
8.var realLength=0，聲明一個變數用於存放字元串的長度。
9.var len=str.length，獲取字元串中字元的個數。
10.var charCode=-1，此變數用來unicode碼值的，當前初始化為-1。
11.x=0，在for迴圈中使用。
12.for(;(x<len)&&(realLength<=maxLength*2);x++){}，遍歷輸入字元串的字元，裡面的限定條件非常的重要，如果沒有realLength<=maxLength*2限定條件，那麼文本框將無法正確限定字元串的個數。
13.charCode=str.charCodeAt(x)，獲取指定索引的字元的unicode碼值。
14.if(charCode>=0&&charCode<=128)，判斷是否是占一個位元組的英文字元或者數字。
15.realLength+=1，長度加1。
16.realLength+=2，如果是漢字長度加2。
17.return realLength，返回長度值。
三.相關閱讀:
1.this可以參閱JavaScript的this用法詳解一章節。
2.value屬性可以參閱javascript的textarea.value屬性一章節。
3.substring()函數可以參閱javascript的String對象的substring()方法一章節。
4.Math.floor()函數可以參閱javascript的Math.floor()方法一章節。
5.innerHTML屬性可以參閱js的innerHTML屬性的用法一章節。
6.charCodeAt()函數可以參閱javascript的String對象的charCodeAt()方法一章節。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=9734
更多內容可以參閱:http://www.softwhy.com/javascript/
