在網上，已經有很多關于在一個textbox限制允許的字符數量。但是如果需要，在textbox中如何去統計和限制行數呢。這里有一個解決方案，使用客戶端的JavaScript去限制TextArea的內容為指定的字符數量和指定的行數（不一定就等于TextArea中可見的行數）。

?

　　我們能通過使用cols 和rows 屬性或者 width 和height樣式屬性，定義可見的寬度和高度，但是我們不能通過使用HTML或者CSS限制字符數量或者文本的行數。幸運的是我們能為TextArea的內容創建一個textRange對象。這個 JavaScript對象有一個只讀的boundingHeight屬性，通過它我們能夠檢索出textRange的高度的像素值。因此，我們只要將 textRange的高度除以TextArea的lineHeight（像素值），就能得到TextArea使用的行數。

　　例子：

?

　　TextArea的定義：

　　代碼

<textarea　name="myText"　id="myText"　cols="44"　rows="4"　wrap="virtual"
　　　　style="font-family:arial;　font-size:14px;　line-height:17px;　height:77px;　overflow:auto;"
　　　　onKeyUp="checkLimits(myForm.myText,myForm.myChars,myForm.myLines);"
　　　　onPaste="checkLimits(myForm.myText,myForm.myChars,myForm.myLines);"
　　　　onCut="checkLimits(myForm.myText,myForm.myChars,myForm.myLines);"
　　　　onBlur="checkLimits(myForm.myText,myForm.myChars,myForm.myLines);">
Text　in　the　limited　
textarea　may　never　exceed　the　defined　maximum　number　of　rows　and/or　characters.
</textarea>

Attributes：

　　我們分配name和id給我們的TextArea，我們定義它可見的大小（rows和cols）。建議設置wrap屬性為"virtual" 或者 "physical" 或者 "hard",但是不要設置為"off"。

　　Style properties：

　　font-family: 我們能使用我們可能會使用比例字體（如Arial）或等寬字體（如Courier）。第一種情況，我們反而會達到字符數限制。第二種情況，我們最可能達到行數的限制。

　　font-size: 在沒有scrollbar情況下，如果我們希望顯示允許的所有行，我們知道font-size，選擇一個適當的line-height ，來計算TextArea的高度。

　　line-height: 我們必須設置TextArea的line-height為一像素值,與給出的font-size相對應。

　　height: 在沒有scrollbar情況下，如果我們想要顯示所有的行，我們不得不設置height至少為(rows*line-height)+(line-height/2)。但我們可以很自由忽略這個屬性，選擇任何其他的適合的高度。

　　Event handlers：

　　* onKeyUp：一個主要的事件來處理，當有文本輸入或者使用鍵盤刪除的時候，調用checkLimits腳本來檢查TextArea的限制條件。

　　* onPaste 和 onCut： 但文本被粘貼到TextArea或者刪除時調用腳本checkLimits.

　　* onBlur　 當TextArea失去焦點的時候，做最后一次檢查。

　　將能非常自由的使用其他的事件處理：例如onKeyPress等等，這取決于你的應用程序的需要。TextArea可能是空值或者包含了一些默認的文本，就像例子中顯示的一樣。

　　這個例子頁面時包含了四個input來顯示TextArea字符數和行數實際數量和最大數量。

　　代碼

<input　name="myChars"　id="myChars"　type="text"　
　　style="text-align:center;　border-width:0px;"　value="0"　
　　size="4"　maxlength="4"　readonly="readonly">
<input　name="maxChars"　id="maxChars"　type="text"　
　　style="text-align:center;　border-width:0px;"　value="0"　
　　size="4"　maxlength="4"　readonly="readonly">　
<input　name="myLines"　id="myLines"　type="text"　
　　style="text-align:center;　border-width:0px;"　value="0"　
　　size="4"　maxlength="3"　readonly="readonly">
<input　name="maxLines"　id="maxLines"　type="text"　
　　style="text-align:center;　border-width:0px;"　value="0"　
　　size="4"　maxlength="3"　readonly="readonly">

代碼：

<script　type="text/JavaScript">
<!--

　　函數getLines被函數checkLimits調用來計算在TextArea使用的行數。變量lineHeight被設置成我們TextArea的樣式屬性line-height的數量值。變量tr代表我們TextArea的文本，由bounding properties持有它的尺寸大小。我們將boundingHeight除以lineHeight來得到我們文本占有的行的數量。

function　getLines(txtArea){
　　var　lineHeight　=　parseInt(txtArea.style.lineHeight.replace(/px/i,''));　　
　　var　tr　=　txtArea.createTextRange();
　　return　Math.ceil(tr.boundingHeight/lineHeight);
}

　　主函數checkLimits帶三個參數，它將被這些事件調用：body.onload, textarea.onKeyUp, textarea.onCut, textarea.onPaste和textarea.onBlur:

　　代碼

myForm.myText　=　name　of　the　textarea　
myForm.myChars　=　name　of　the　field　where　we　display　the　actual　number　of　characters　
myForm.myLines　=　name　of　the　field　where　we　display　the　actual　number　of　lines
　
function　checkLimits(txtArea,countChars,countLines){

　　在這個例子中，maxLines和maxChars的值來源于TextArea的可見大小，但是我們也可以選擇任何一個適當的值。我們設置統計的countChars為txtArea.alue的長度，countLines為函數getLines(txtArea)的返回值。在頁面的myForm.myChars 和 myForm.myLines上顯示它們。我們也在頁面上顯示行數和字符數的限制值。

　　代碼

var　maxLines　=　txtArea.rows;
var　maxChars　=　txtArea.rows　*　txtArea.cols;　
countChars.value　=　txtArea.value.length;
countLines.value　=　getLines(txtArea);
document.myForm.maxLines.value　=　maxLines;
document.myForm.maxChars.value　=　maxChars;

首先，我們檢查是否maxChars 或者　 maxLines的限制是否達到。用戶輸入一新行時，在這個情況下，我們必須要縮短文本區內容，直到超出限制，通過彈出提示框，中斷進一步輸入。

　　代碼

if((txtArea.value.length　>=　maxChars　||　getLines(txtArea)　>=　maxLines)　
　　　　&&　(window.event.keyCode　==　10　||　window.event.keyCode　==　13))　
{　
　　　　while(getLines(txtArea)　>　maxLines)　
　　　　　　txtArea.value　=　txtArea.value.substr(0,txtArea.value.length-2);　
　　　　while(txtArea.value.length　>　maxChars)　
　　　　　　txtArea.value　=　txtArea.value.substr(0,txtArea.value.length-2);　
　　　　alert("chars　and　/　or　lines　limit　reached");　
}

　　如果輸入了字符數量超過了最大允許數量，TestArea的長度會自動減少到txtArea的數量，會彈出提示框。

　　代碼

else　if(txtArea.value.length　>　maxChars　)　
{　
　　　　while(txtArea.value.length　>　maxChars)　
　　　　{　
　　　　　　txtArea.value　=　txtArea.value.substr(0,txtArea.value.length-1);　
　　　　}　
　　　　alert("chars　limit　reached");　
}

　　同樣，如果文本超過了行數的限制。也會自動減少直到等于maxLines，彈出提示框。有一件事情必須說起，限制的檢查在input處理完之后，因此，片刻，一個垂直的scrollbar在會顯示在瀏覽器上。最后一行會減少一些多余的字符。為了避免輸入的丟失，我們設置txtArea的Height為((rows + 1) * lineHeight).

　　代碼

else　if　(f　(countLines.value　>　maxLines)　
{　
　　　　while(countLines.value　>　maxLines)　
　　　　{　
　　　　　　txtArea.value　=　txtArea.value.substr(0,txtArea.value.length-1);　
　　　　}　
　　　　alert("lines　limit　reached");　
}

　　最后，統計更新。

　　countChars.value　=　txtArea.value.length;　
　　countLines.value　=　getLines(txtArea);　
}　//-->　
</script>

　　這些代碼只在IE7.0中測試過。在一些情況下，限制行的數量也是必須的。例如，當文本存入數據庫字段的時候，我們要統計字符的數量。進一步，我們利用boundingwidth限制TextArea的寬度，而不是由瀏覽器自動換行。

　　原文：http://www.codeproject.com/KB/scripting/TALimit.ASPx

本文來自CSDN博客，轉載請標明出處：http://blog.csdn.net/mane_yao/archive/2010/04/20/5505516.aspx

轉載于:https://www.cnblogs.com/mane/archive/2010/09/18/1829948.html

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的在一个TextArea中如何限制行数和字符数的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。