文字框輸入數字倒計例項程式碼

antzone發表於2017-03-15

一般情況下，文字框中文字的個數並不是無限的，也就是說具有一定的限制，在人性化程度較好的網站一般有輸入文字倒計效果，這樣可以便於瀏覽者組織語言，下面就簡單介紹一下如何實現此效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!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.substring()函式可以參閱javascript substring()一章節。 

3.Math.floor()函式可以參閱javascript Math.floor()一章節。 

4.innerHTML屬性可以參閱js innerHTML一章節。 

5.charCodeAt()函式可以參閱javascript charCodeAt()一章節。 

相關文章